@commercetools/nimbus-mcp 2.11.0 → 3.1.0

package/data/docs/search-index.json

@@ -1 +1 @@
-[{"id":"Architecture-Decision-Records","title":"ADR: Using Architecture Decision Records","description":"An explanation of what Architecture Decision Records are and how we use them","tags":["architecture","documentation","process"],"route":"home/contribute/adrs","menu":["Home","Contribute","ADR's"],"content":"ADR: Using Architecture Decision Records\n\nContext\n\nAs our UI component library grows, we need a structured way to document\nimportant architectural decisions. This ensures that:\n\n- Team members understand the context and reasoning behind important decisions\n- Future contributors can reference past decisions rather than revisiting\n  settled issues\n- We maintain a useful historical record of how the project has evolved\n\nDecision\n\nWe will use Architecture Decision Records (ADRs) to document signific","_lower":{"title":"adr: using architecture decision records","description":"an explanation of what architecture decision records are and how we use them","tags":"architecture documentation process","content":"adr: using architecture decision records\n\ncontext\n\nas our ui component library grows, we need a structured way to document\nimportant architectural decisions. this ensures that:\n\n- team members understand the context and reasoning behind important decisions\n- future contributors can reference past decisions rather than revisiting\n  settled issues\n- we maintain a useful historical record of how the project has evolved\n\ndecision\n\nwe will use architecture decision records (adrs) to document signific","combined":"adr: using architecture decision records an explanation of what architecture decision records are and how we use them architecture documentation process adr: using architecture decision records\n\ncontext\n\nas our ui component library grows, we need a structured way to document\nimportant architectural decisions. this ensures that:\n\n- team members understand the context and reasoning behind important decisions\n- future contributors can reference past decisions rather than revisiting\n  settled issues\n- we maintain a useful historical record of how the project has evolved\n\ndecision\n\nwe will use architecture decision records (adrs) to document signific","titleNoSpaces":"adr:usingarchitecturedecisionrecords","descriptionNoSpaces":"anexplanationofwhatarchitecturedecisionrecordsareandhowweusethem","tagsNoSpaces":"architecturedocumentationprocess","titleWords":["adr:","using","architecture","decision","records"],"descriptionWords":["an","explanation","of","what","architecture","decision","records","are","and","how","we","use","them"],"tagsWords":["architecture","documentation","process"]}},{"id":"Breakpoints","title":"Breakpoints","description":"The list of available breakpoints","tags":["z-index","layer","stacking","context"],"route":"home/design-tokens/other/breakpoints","menu":["Home","Design Tokens","Other","Breakpoints"],"content":"Breakpoints\n\nBreakpoints define specific screen widths at which your design should adapt to\nprovide an optimal viewing experience for users. They are thresholds that\nrepresent a starting point for changes in styling, such as font sizes, layouts,\nand visibility of elements.\n\nEach breakpoint is a minimum width, meaning that styles associated with that\nbreakpoint apply to screen sizes equal to or larger than the specified width.\nThe styles remain active until the next breakpoint threshold is reache","_lower":{"title":"breakpoints","description":"the list of available breakpoints","tags":"z-index layer stacking context","content":"breakpoints\n\nbreakpoints define specific screen widths at which your design should adapt to\nprovide an optimal viewing experience for users. they are thresholds that\nrepresent a starting point for changes in styling, such as font sizes, layouts,\nand visibility of elements.\n\neach breakpoint is a minimum width, meaning that styles associated with that\nbreakpoint apply to screen sizes equal to or larger than the specified width.\nthe styles remain active until the next breakpoint threshold is reache","combined":"breakpoints the list of available breakpoints z-index layer stacking context breakpoints\n\nbreakpoints define specific screen widths at which your design should adapt to\nprovide an optimal viewing experience for users. they are thresholds that\nrepresent a starting point for changes in styling, such as font sizes, layouts,\nand visibility of elements.\n\neach breakpoint is a minimum width, meaning that styles associated with that\nbreakpoint apply to screen sizes equal to or larger than the specified width.\nthe styles remain active until the next breakpoint threshold is reache","titleNoSpaces":"breakpoints","descriptionNoSpaces":"thelistofavailablebreakpoints","tagsNoSpaces":"z-indexlayerstackingcontext","titleWords":["breakpoints"],"descriptionWords":["the","list","of","available","breakpoints"],"tagsWords":["z-index","layer","stacking","context"]}},{"id":"Colors","title":"Colors","description":"available colors","tags":["colors"],"route":"home/design-tokens/colors","menu":["Home","Design Tokens","Colors"],"content":"Colors\n\nOur color system is built on Radix Colors,\nwhich organizes colors into scales based on contrast levels to ensure\nclarity and usability across various contexts. Each scale provides a range\nof tones, from subtle backgrounds to high-contrast elements like text and\ninteractive borders. A full scale for a given color is referred to as a\ncolorPalette (e.g., colorPalette: \"red\").\n\nThe scales are _interchangeable_, meaning a color like red can be swapped with\ngreen without losing the intended co","_lower":{"title":"colors","description":"available colors","tags":"colors","content":"colors\n\nour color system is built on radix colors,\nwhich organizes colors into scales based on contrast levels to ensure\nclarity and usability across various contexts. each scale provides a range\nof tones, from subtle backgrounds to high-contrast elements like text and\ninteractive borders. a full scale for a given color is referred to as a\ncolorpalette (e.g., colorpalette: \"red\").\n\nthe scales are _interchangeable_, meaning a color like red can be swapped with\ngreen without losing the intended co","combined":"colors available colors colors colors\n\nour color system is built on radix colors,\nwhich organizes colors into scales based on contrast levels to ensure\nclarity and usability across various contexts. each scale provides a range\nof tones, from subtle backgrounds to high-contrast elements like text and\ninteractive borders. a full scale for a given color is referred to as a\ncolorpalette (e.g., colorpalette: \"red\").\n\nthe scales are _interchangeable_, meaning a color like red can be swapped with\ngreen without losing the intended co","titleNoSpaces":"colors","descriptionNoSpaces":"availablecolors","tagsNoSpaces":"colors","titleWords":["colors"],"descriptionWords":["available","colors"],"tagsWords":["colors"]}},{"id":"Component-Lifecycle-States","title":"ADR: Nimbus Software Lifecycle States","description":"Architecture decision record defining the lifecycle states for Nimbus components, hooks, utilities, classes, etc.","tags":["architecture","lifecycle","versioning","stability"],"route":"home/contribute/adrs/adr0003-component-lifecycle-states","menu":["Home","Contribute","ADR's","ADR0003 Component Lifecycle States"],"content":"ADR: Nimbus Software Lifecycle States\n\nContext\n\nAs Nimbus grows and evolves, we need a clear system to communicate the\nstability, support level, and future trajectory of our components, hooks,\nutilities, functions, and classes to consumers. Without a standardized\nlifecycle system, consumers cannot make informed decisions about adoption,\nmigration planning, or production readiness.\n\nThe lack of clear lifecycle states leads to:\n- Uncertainty about which features are safe for production use\n- Diffi","_lower":{"title":"adr: nimbus software lifecycle states","description":"architecture decision record defining the lifecycle states for nimbus components, hooks, utilities, classes, etc.","tags":"architecture lifecycle versioning stability","content":"adr: nimbus software lifecycle states\n\ncontext\n\nas nimbus grows and evolves, we need a clear system to communicate the\nstability, support level, and future trajectory of our components, hooks,\nutilities, functions, and classes to consumers. without a standardized\nlifecycle system, consumers cannot make informed decisions about adoption,\nmigration planning, or production readiness.\n\nthe lack of clear lifecycle states leads to:\n- uncertainty about which features are safe for production use\n- diffi","combined":"adr: nimbus software lifecycle states architecture decision record defining the lifecycle states for nimbus components, hooks, utilities, classes, etc. architecture lifecycle versioning stability adr: nimbus software lifecycle states\n\ncontext\n\nas nimbus grows and evolves, we need a clear system to communicate the\nstability, support level, and future trajectory of our components, hooks,\nutilities, functions, and classes to consumers. without a standardized\nlifecycle system, consumers cannot make informed decisions about adoption,\nmigration planning, or production readiness.\n\nthe lack of clear lifecycle states leads to:\n- uncertainty about which features are safe for production use\n- diffi","titleNoSpaces":"adr:nimbussoftwarelifecyclestates","descriptionNoSpaces":"architecturedecisionrecorddefiningthelifecyclestatesfornimbuscomponents,hooks,utilities,classes,etc.","tagsNoSpaces":"architecturelifecycleversioningstability","titleWords":["adr:","nimbus","software","lifecycle","states"],"descriptionWords":["architecture","decision","record","defining","the","lifecycle","states","for","nimbus","components,","hooks,","utilities,","classes,","etc."],"tagsWords":["architecture","lifecycle","versioning","stability"]}},{"id":"Components","title":"Components","description":"React components for building robust and visually appealing applications.","tags":["components","react"],"route":"components","menu":["Components"],"content":"Components\n\n<CategoryOverview />","_lower":{"title":"components","description":"react components for building robust and visually appealing applications.","tags":"components react","content":"components\n\n<categoryoverview />","combined":"components react components for building robust and visually appealing applications. components react components\n\n<categoryoverview />","titleNoSpaces":"components","descriptionNoSpaces":"reactcomponentsforbuildingrobustandvisuallyappealingapplications.","tagsNoSpaces":"componentsreact","titleWords":["components"],"descriptionWords":["react","components","for","building","robust","and","visually","appealing","applications."],"tagsWords":["components","react"]}},{"id":"Components-Accessibility","title":"Accessibility","description":"Components designed to enhance accessibility and ARIA compliance.","tags":["document"],"route":"components/accessibility","menu":["Components","Accessibility"],"content":"Accessibility\n\nComponents designed to enhance accessibility and ARIA compliance.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"accessibility","description":"components designed to enhance accessibility and aria compliance.","tags":"document","content":"accessibility\n\ncomponents designed to enhance accessibility and aria compliance.\n\n<categoryoverview variant=\"list\" />","combined":"accessibility components designed to enhance accessibility and aria compliance. document accessibility\n\ncomponents designed to enhance accessibility and aria compliance.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"accessibility","descriptionNoSpaces":"componentsdesignedtoenhanceaccessibilityandariacompliance.","tagsNoSpaces":"document","titleWords":["accessibility"],"descriptionWords":["components","designed","to","enhance","accessibility","and","aria","compliance."],"tagsWords":["document"]}},{"id":"Components-Accordion","title":"Accordion","exportName":"Accordion","description":"A collapsable component lets users show and hide sections of related content on a page.","tags":["component","accordion","expandable","disclosure","panels"],"route":"components/navigation/accordion","menu":["Components","Navigation","Accordion"],"content":"Overview\n\nThe primary difference between accordion types lies in whether they use\nadditional controls for accessing information or offer a simple click-to-expand\ninteraction.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact ARIA\nARIA Pattern\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nMedium\n\nThe default size for forms.\n\n``jsx live\nconst App = () => (\n  <Accordion.Root>\n    <Accordion.Item>\n      <Accordion.Header>\n        Headli","_lower":{"title":"accordion","description":"a collapsable component lets users show and hide sections of related content on a page.","tags":"component accordion expandable disclosure panels","content":"overview\n\nthe primary difference between accordion types lies in whether they use\nadditional controls for accessing information or offer a simple click-to-expand\ninteraction.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium\n\nthe default size for forms.\n\n``jsx live\nconst app = () => (\n  <accordion.root>\n    <accordion.item>\n      <accordion.header>\n        headli","combined":"accordion a collapsable component lets users show and hide sections of related content on a page. component accordion expandable disclosure panels overview\n\nthe primary difference between accordion types lies in whether they use\nadditional controls for accessing information or offer a simple click-to-expand\ninteraction.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium\n\nthe default size for forms.\n\n``jsx live\nconst app = () => (\n  <accordion.root>\n    <accordion.item>\n      <accordion.header>\n        headli","titleNoSpaces":"accordion","descriptionNoSpaces":"acollapsablecomponentletsusersshowandhidesectionsofrelatedcontentonapage.","tagsNoSpaces":"componentaccordionexpandabledisclosurepanels","titleWords":["accordion"],"descriptionWords":["a","collapsable","component","lets","users","show","and","hide","sections","of","related","content","on","a","page."],"tagsWords":["component","accordion","expandable","disclosure","panels"]}},{"id":"Components-Alert","title":"Alert","exportName":"Alert","description":"For urgent, high-impact messages, such as system alerts, alert banners are used to ensure visibility and encourage immediate user response.","tags":["component","alert","notification","status","banner"],"route":"components/feedback/alert","menu":["Components","Feedback","Alert"],"content":"Overview\n\nThese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nAdjustable elements\n\nSeveral of the features are flexible and optional for many use cases.\nNon-optional elements are the message, and the icons that are tied to the type\nof mes","_lower":{"title":"alert","description":"for urgent, high-impact messages, such as system alerts, alert banners are used to ensure visibility and encourage immediate user response.","tags":"component alert notification status banner","content":"overview\n\nthese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nadjustable elements\n\nseveral of the features are flexible and optional for many use cases.\nnon-optional elements are the message, and the icons that are tied to the type\nof mes","combined":"alert for urgent, high-impact messages, such as system alerts, alert banners are used to ensure visibility and encourage immediate user response. component alert notification status banner overview\n\nthese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nadjustable elements\n\nseveral of the features are flexible and optional for many use cases.\nnon-optional elements are the message, and the icons that are tied to the type\nof mes","titleNoSpaces":"alert","descriptionNoSpaces":"forurgent,high-impactmessages,suchassystemalerts,alertbannersareusedtoensurevisibilityandencourageimmediateuserresponse.","tagsNoSpaces":"componentalertnotificationstatusbanner","titleWords":["alert"],"descriptionWords":["for","urgent,","high-impact","messages,","such","as","system","alerts,","alert","banners","are","used","to","ensure","visibility","and","encourage","immediate","user","response."],"tagsWords":["component","alert","notification","status","banner"]}},{"id":"Components-Avatar","title":"Avatar","exportName":"Avatar","description":"A small image or icon that identifies and personalizes the user within the interface.","tags":["component","avatar","user","profile","image"],"route":"components/media/avatar","menu":["Components","Media","Avatar"],"content":"Overview\n\nAvatar components can include images or the initials of the user’s first and\nlast name.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nMedium (40px)\n\nMost commonly used in the upper right hand side of the page paired with a\ndrop-down menu.\n\n``jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\">\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotex","_lower":{"title":"avatar","description":"a small image or icon that identifies and personalizes the user within the interface.","tags":"component avatar user profile image","content":"overview\n\navatar components can include images or the initials of the user’s first and\nlast name.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium (40px)\n\nmost commonly used in the upper right hand side of the page paired with a\ndrop-down menu.\n\n``jsx live\nconst app = () => (\n  <stack direction=\"horizontal\">\n    <avatar firstname=\"adam\" lastname=\"vadam\" src=\"https://thispersondoesnotex","combined":"avatar a small image or icon that identifies and personalizes the user within the interface. component avatar user profile image overview\n\navatar components can include images or the initials of the user’s first and\nlast name.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium (40px)\n\nmost commonly used in the upper right hand side of the page paired with a\ndrop-down menu.\n\n``jsx live\nconst app = () => (\n  <stack direction=\"horizontal\">\n    <avatar firstname=\"adam\" lastname=\"vadam\" src=\"https://thispersondoesnotex","titleNoSpaces":"avatar","descriptionNoSpaces":"asmallimageoriconthatidentifiesandpersonalizestheuserwithintheinterface.","tagsNoSpaces":"componentavataruserprofileimage","titleWords":["avatar"],"descriptionWords":["a","small","image","or","icon","that","identifies","and","personalizes","the","user","within","the","interface."],"tagsWords":["component","avatar","user","profile","image"]}},{"id":"Components-Badge","title":"Badge","exportName":"Badge","description":"Briefly highlights or categorizes associated UI elements with concise visual cues for status or metadata.","tags":["component","badge","label","status","indicator"],"route":"components/data-display/badge","menu":["Components","Data Display","Badge"],"content":"Overview\n\nBadges are small, visually distinct labels used to highlight status, category,\nor counts associated with other UI elements. They feature concise text and\ncustomizable styling for clear communication without overwhelming the primary\ncontent.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nMedium\n\nThis is the default size.\n\n``jsx live\nconst App = () => (\n  <Badge colorPalette=\"primar","_lower":{"title":"badge","description":"briefly highlights or categorizes associated ui elements with concise visual cues for status or metadata.","tags":"component badge label status indicator","content":"overview\n\nbadges are small, visually distinct labels used to highlight status, category,\nor counts associated with other ui elements. they feature concise text and\ncustomizable styling for clear communication without overwhelming the primary\ncontent.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium\n\nthis is the default size.\n\n``jsx live\nconst app = () => (\n  <badge colorpalette=\"primar","combined":"badge briefly highlights or categorizes associated ui elements with concise visual cues for status or metadata. component badge label status indicator overview\n\nbadges are small, visually distinct labels used to highlight status, category,\nor counts associated with other ui elements. they feature concise text and\ncustomizable styling for clear communication without overwhelming the primary\ncontent.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium\n\nthis is the default size.\n\n``jsx live\nconst app = () => (\n  <badge colorpalette=\"primar","titleNoSpaces":"badge","descriptionNoSpaces":"brieflyhighlightsorcategorizesassociateduielementswithconcisevisualcuesforstatusormetadata.","tagsNoSpaces":"componentbadgelabelstatusindicator","titleWords":["badge"],"descriptionWords":["briefly","highlights","or","categorizes","associated","ui","elements","with","concise","visual","cues","for","status","or","metadata."],"tagsWords":["component","badge","label","status","indicator"]}},{"id":"Components-Box","title":"Box","exportName":"Box","description":"Box is a basic layout component that serves as a wrapper or container. It's based on the Chakra UI Box component and supports all style props for rapid UI development.","tags":["component","box","container","wrapper","layout"],"route":"components/layout/box","menu":["Components","Layout","Box"],"content":"Import\n\n``jsx\nimport { Box } from \"@commercetools/nimbus\";\n`\n\nUsage\n\nBasic usage\n\n`jsx live\nconst App = () => (\n  <Box p=\"100\" bg=\"primary.3\">\n    Basic Box\n  </Box>\n);\n`\n\nAs a flex container\n\n`jsx live\nconst App = () => (\n  <Box display=\"flex\" gap=\"100\">\n    <Box p=\"100\" bg=\"primary.3\">\n      Item 1\n    </Box>\n    <Box p=\"100\" bg=\"primary.3\">\n      Item 2\n    </Box>\n  </Box>\n);\n`\n\nWith border\n\n`jsx live\nconst App = () => (\n  <Box p=\"100\" border=\"solid-50\" borderColor=\"primary.3\">\n    Box with b","_lower":{"title":"box","description":"box is a basic layout component that serves as a wrapper or container. it's based on the chakra ui box component and supports all style props for rapid ui development.","tags":"component box container wrapper layout","content":"import\n\n``jsx\nimport { box } from \"@commercetools/nimbus\";\n`\n\nusage\n\nbasic usage\n\n`jsx live\nconst app = () => (\n  <box p=\"100\" bg=\"primary.3\">\n    basic box\n  </box>\n);\n`\n\nas a flex container\n\n`jsx live\nconst app = () => (\n  <box display=\"flex\" gap=\"100\">\n    <box p=\"100\" bg=\"primary.3\">\n      item 1\n    </box>\n    <box p=\"100\" bg=\"primary.3\">\n      item 2\n    </box>\n  </box>\n);\n`\n\nwith border\n\n`jsx live\nconst app = () => (\n  <box p=\"100\" border=\"solid-50\" bordercolor=\"primary.3\">\n    box with b","combined":"box box is a basic layout component that serves as a wrapper or container. it's based on the chakra ui box component and supports all style props for rapid ui development. component box container wrapper layout import\n\n``jsx\nimport { box } from \"@commercetools/nimbus\";\n`\n\nusage\n\nbasic usage\n\n`jsx live\nconst app = () => (\n  <box p=\"100\" bg=\"primary.3\">\n    basic box\n  </box>\n);\n`\n\nas a flex container\n\n`jsx live\nconst app = () => (\n  <box display=\"flex\" gap=\"100\">\n    <box p=\"100\" bg=\"primary.3\">\n      item 1\n    </box>\n    <box p=\"100\" bg=\"primary.3\">\n      item 2\n    </box>\n  </box>\n);\n`\n\nwith border\n\n`jsx live\nconst app = () => (\n  <box p=\"100\" border=\"solid-50\" bordercolor=\"primary.3\">\n    box with b","titleNoSpaces":"box","descriptionNoSpaces":"boxisabasiclayoutcomponentthatservesasawrapperorcontainer.it'sbasedonthechakrauiboxcomponentandsupportsallstylepropsforrapiduidevelopment.","tagsNoSpaces":"componentboxcontainerwrapperlayout","titleWords":["box"],"descriptionWords":["box","is","a","basic","layout","component","that","serves","as","a","wrapper","or","container.","it's","based","on","the","chakra","ui","box","component","and","supports","all","style","props","for","rapid","ui","development."],"tagsWords":["component","box","container","wrapper","layout"]}},{"id":"Components-Button","title":"Button","exportName":"Button","description":"A button serves as a standardized, reusable component for triggering actions and navigating.","tags":["component","buttons","forms"],"route":"components/buttons/button","menu":["Components","Buttons","Button"],"content":"Overview\n\nButtons are clickable elements that initiate actions. They're how we encourage\nusers to take action and explore different parts of our interface.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nHierarchy\n\nPrimary actions\n\nPrimary colorPalette, filled style, medium size. For the principal call to action on the\npage. Primary buttons should only appear once per screen.\n\n- A solid button should be used as a primary action on a page us","_lower":{"title":"button","description":"a button serves as a standardized, reusable component for triggering actions and navigating.","tags":"component buttons forms","content":"overview\n\nbuttons are clickable elements that initiate actions. they're how we encourage\nusers to take action and explore different parts of our interface.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nhierarchy\n\nprimary actions\n\nprimary colorpalette, filled style, medium size. for the principal call to action on the\npage. primary buttons should only appear once per screen.\n\n- a solid button should be used as a primary action on a page us","combined":"button a button serves as a standardized, reusable component for triggering actions and navigating. component buttons forms overview\n\nbuttons are clickable elements that initiate actions. they're how we encourage\nusers to take action and explore different parts of our interface.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nhierarchy\n\nprimary actions\n\nprimary colorpalette, filled style, medium size. for the principal call to action on the\npage. primary buttons should only appear once per screen.\n\n- a solid button should be used as a primary action on a page us","titleNoSpaces":"button","descriptionNoSpaces":"abuttonservesasastandardized,reusablecomponentfortriggeringactionsandnavigating.","tagsNoSpaces":"componentbuttonsforms","titleWords":["button"],"descriptionWords":["a","button","serves","as","a","standardized,","reusable","component","for","triggering","actions","and","navigating."],"tagsWords":["component","buttons","forms"]}},{"id":"Components-Buttons","title":"Buttons","description":"Components for triggering actions, submitting forms, and navigation.","tags":["buttons","actions","interactions"],"route":"components/buttons","menu":["Components","Buttons"],"content":"Buttons  \n\nComponents for triggering actions, submitting forms, and navigation.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"buttons","description":"components for triggering actions, submitting forms, and navigation.","tags":"buttons actions interactions","content":"buttons  \n\ncomponents for triggering actions, submitting forms, and navigation.\n\n<categoryoverview variant=\"list\" />","combined":"buttons components for triggering actions, submitting forms, and navigation. buttons actions interactions buttons  \n\ncomponents for triggering actions, submitting forms, and navigation.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"buttons","descriptionNoSpaces":"componentsfortriggeringactions,submittingforms,andnavigation.","tagsNoSpaces":"buttonsactionsinteractions","titleWords":["buttons"],"descriptionWords":["components","for","triggering","actions,","submitting","forms,","and","navigation."],"tagsWords":["buttons","actions","interactions"]}},{"id":"Components-Calendar","title":"Calendar","exportName":"Calendar","description":"Calendars display a grid of days in one or more months and allow users to select a single date.","tags":["component","calendar","date","picker","month"],"route":"components/inputs/calendar","menu":["Components","Inputs","Calendar"],"content":"Overview\n\nThe calendar component is most often used within the popover component when a\nuser interacts with a date input. Easily toggle between month, year, and single\nday selection.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nSingle date select\n\nAllow users to see the current date, and select a single date.\n\n``jsx live\nconst App = () => <Calendar aria-label=\"Enter a ","_lower":{"title":"calendar","description":"calendars display a grid of days in one or more months and allow users to select a single date.","tags":"component calendar date picker month","content":"overview\n\nthe calendar component is most often used within the popover component when a\nuser interacts with a date input. easily toggle between month, year, and single\nday selection.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsingle date select\n\nallow users to see the current date, and select a single date.\n\n``jsx live\nconst app = () => <calendar aria-label=\"enter a ","combined":"calendar calendars display a grid of days in one or more months and allow users to select a single date. component calendar date picker month overview\n\nthe calendar component is most often used within the popover component when a\nuser interacts with a date input. easily toggle between month, year, and single\nday selection.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsingle date select\n\nallow users to see the current date, and select a single date.\n\n``jsx live\nconst app = () => <calendar aria-label=\"enter a ","titleNoSpaces":"calendar","descriptionNoSpaces":"calendarsdisplayagridofdaysinoneormoremonthsandallowuserstoselectasingledate.","tagsNoSpaces":"componentcalendardatepickermonth","titleWords":["calendar"],"descriptionWords":["calendars","display","a","grid","of","days","in","one","or","more","months","and","allow","users","to","select","a","single","date."],"tagsWords":["component","calendar","date","picker","month"]}},{"id":"Components-Card","title":"Card","exportName":"Card","description":"A versatile container component presents self-contained information, often combining text, images, and actions, making it ideal for displaying summaries or content previews.","tags":["component","card","container","surface","content"],"route":"components/data-display/card","menu":["Components","Data Display","Card"],"content":"Overview\n\nThis versatile container component often integrates text, images, and actions.\nInteraction methods differ: some are clickable, others use buttons and links,\nand some are purely informational, grouping content without direct interaction.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library","_lower":{"title":"card","description":"a versatile container component presents self-contained information, often combining text, images, and actions, making it ideal for displaying summaries or content previews.","tags":"component card container surface content","content":"overview\n\nthis versatile container component often integrates text, images, and actions.\ninteraction methods differ: some are clickable, others use buttons and links,\nand some are purely informational, grouping content without direct interaction.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library","combined":"card a versatile container component presents self-contained information, often combining text, images, and actions, making it ideal for displaying summaries or content previews. component card container surface content overview\n\nthis versatile container component often integrates text, images, and actions.\ninteraction methods differ: some are clickable, others use buttons and links,\nand some are purely informational, grouping content without direct interaction.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library","titleNoSpaces":"card","descriptionNoSpaces":"aversatilecontainercomponentpresentsself-containedinformation,oftencombiningtext,images,andactions,makingitidealfordisplayingsummariesorcontentpreviews.","tagsNoSpaces":"componentcardcontainersurfacecontent","titleWords":["card"],"descriptionWords":["a","versatile","container","component","presents","self-contained","information,","often","combining","text,","images,","and","actions,","making","it","ideal","for","displaying","summaries","or","content","previews."],"tagsWords":["component","card","container","surface","content"]}},{"id":"Components-Checkbox","title":"Checkbox","exportName":"Checkbox","description":"Checkbox allows for toggling of features, allowing users to select more than one option where needed. Checkboxes support selected, unselected, indeterminate, and disabled states.","tags":["component","checkbox","input","toggle","boolean"],"route":"components/inputs/checkbox","menu":["Components","Inputs","Checkbox"],"content":"Overview\n\nCheckboxes are commonly used in forms, settings panels, and other interactive\ncontexts where users can choose one or more options from a set. See below\nvariables for further choices.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSelection\n\nUnchecked\n\nRepresents the default or unchosen state.\n\n``jsx live\nconst App = () => <Checkbox>Label</Checkbox>\n`\n\nSelect\n\nVisually confirms a user’s ","_lower":{"title":"checkbox","description":"checkbox allows for toggling of features, allowing users to select more than one option where needed. checkboxes support selected, unselected, indeterminate, and disabled states.","tags":"component checkbox input toggle boolean","content":"overview\n\ncheckboxes are commonly used in forms, settings panels, and other interactive\ncontexts where users can choose one or more options from a set. see below\nvariables for further choices.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nselection\n\nunchecked\n\nrepresents the default or unchosen state.\n\n``jsx live\nconst app = () => <checkbox>label</checkbox>\n`\n\nselect\n\nvisually confirms a user’s ","combined":"checkbox checkbox allows for toggling of features, allowing users to select more than one option where needed. checkboxes support selected, unselected, indeterminate, and disabled states. component checkbox input toggle boolean overview\n\ncheckboxes are commonly used in forms, settings panels, and other interactive\ncontexts where users can choose one or more options from a set. see below\nvariables for further choices.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nselection\n\nunchecked\n\nrepresents the default or unchosen state.\n\n``jsx live\nconst app = () => <checkbox>label</checkbox>\n`\n\nselect\n\nvisually confirms a user’s ","titleNoSpaces":"checkbox","descriptionNoSpaces":"checkboxallowsfortogglingoffeatures,allowinguserstoselectmorethanoneoptionwhereneeded.checkboxessupportselected,unselected,indeterminate,anddisabledstates.","tagsNoSpaces":"componentcheckboxinputtoggleboolean","titleWords":["checkbox"],"descriptionWords":["checkbox","allows","for","toggling","of","features,","allowing","users","to","select","more","than","one","option","where","needed.","checkboxes","support","selected,","unselected,","indeterminate,","and","disabled","states."],"tagsWords":["component","checkbox","input","toggle","boolean"]}},{"id":"Components-Code","title":"Code","exportName":"Code","description":"renders code blocks","tags":["component","code","syntax","monospace"],"route":"components/typography/code","menu":["Components","Typography","Code"],"content":"Add description later.","_lower":{"title":"code","description":"renders code blocks","tags":"component code syntax monospace","content":"add description later.","combined":"code renders code blocks component code syntax monospace add description later.","titleNoSpaces":"code","descriptionNoSpaces":"renderscodeblocks","tagsNoSpaces":"componentcodesyntaxmonospace","titleWords":["code"],"descriptionWords":["renders","code","blocks"],"tagsWords":["component","code","syntax","monospace"]}},{"id":"Components-CollapsibleMotion","title":"Collapsible motion","exportName":"CollapsibleMotion","description":"A modern, accessible implementation of collapsible content with smooth height animations. Built with React Aria for accessibility and Chakra UI for consistent theming.","tags":["component","collapsible","accordion","disclosure","animation","accessibility"],"route":"components/navigation/collapsible-motion","menu":["Components","Navigation","Collapsible motion"],"content":"Overview\n\nCollapsibleMotion is a compound component that provides smooth, accessible\ncollapsible content with height animations. It combines React Aria's\naccessibility features with Chakra UI's theming system to deliver a robust\nfoundation for disclosure patterns, accordions, and expandable content sections.\n\nKey features\n\n- Smooth height animations: Customizable duration with automatic content\n  measurement\n- Full accessibility support: Proper ARIA attributes and screen reader\n  compatibility\n-","_lower":{"title":"collapsible motion","description":"a modern, accessible implementation of collapsible content with smooth height animations. built with react aria for accessibility and chakra ui for consistent theming.","tags":"component collapsible accordion disclosure animation accessibility","content":"overview\n\ncollapsiblemotion is a compound component that provides smooth, accessible\ncollapsible content with height animations. it combines react aria's\naccessibility features with chakra ui's theming system to deliver a robust\nfoundation for disclosure patterns, accordions, and expandable content sections.\n\nkey features\n\n- smooth height animations: customizable duration with automatic content\n  measurement\n- full accessibility support: proper aria attributes and screen reader\n  compatibility\n-","combined":"collapsible motion a modern, accessible implementation of collapsible content with smooth height animations. built with react aria for accessibility and chakra ui for consistent theming. component collapsible accordion disclosure animation accessibility overview\n\ncollapsiblemotion is a compound component that provides smooth, accessible\ncollapsible content with height animations. it combines react aria's\naccessibility features with chakra ui's theming system to deliver a robust\nfoundation for disclosure patterns, accordions, and expandable content sections.\n\nkey features\n\n- smooth height animations: customizable duration with automatic content\n  measurement\n- full accessibility support: proper aria attributes and screen reader\n  compatibility\n-","titleNoSpaces":"collapsiblemotion","descriptionNoSpaces":"amodern,accessibleimplementationofcollapsiblecontentwithsmoothheightanimations.builtwithreactariaforaccessibilityandchakrauiforconsistenttheming.","tagsNoSpaces":"componentcollapsibleaccordiondisclosureanimationaccessibility","titleWords":["collapsible","motion"],"descriptionWords":["a","modern,","accessible","implementation","of","collapsible","content","with","smooth","height","animations.","built","with","react","aria","for","accessibility","and","chakra","ui","for","consistent","theming."],"tagsWords":["component","collapsible","accordion","disclosure","animation","accessibility"]}},{"id":"Components-ComboBox","title":"Combo box","exportName":"ComboBox","description":"A combobox is an input that combines a text field with a pop-up list of options. It allows users to select a value from a predefined list or enter their own custom value.","tags":["component","combobox","autocomplete","dropdown","typeahead"],"route":"components/inputs/combo-box","menu":["Components","Inputs","Combo box"],"content":"Overview\n\nThe combobox component provides both selection and text input capabilities. It\ndisplays a list of options that users can choose from, while also allowing them\nto type directly into the text field. This functionality improves user\nexperience by assisting with value selection and, in some cases, prevents\ninvalid entries.\n\nKey features\n\n- External State Management: Full control over async logic using React Stately's useAsyncList\n- Debouncing: Use useDebouncedCallback from use-debounce to ","_lower":{"title":"combo box","description":"a combobox is an input that combines a text field with a pop-up list of options. it allows users to select a value from a predefined list or enter their own custom value.","tags":"component combobox autocomplete dropdown typeahead","content":"overview\n\nthe combobox component provides both selection and text input capabilities. it\ndisplays a list of options that users can choose from, while also allowing them\nto type directly into the text field. this functionality improves user\nexperience by assisting with value selection and, in some cases, prevents\ninvalid entries.\n\nkey features\n\n- external state management: full control over async logic using react stately's useasynclist\n- debouncing: use usedebouncedcallback from use-debounce to ","combined":"combo box a combobox is an input that combines a text field with a pop-up list of options. it allows users to select a value from a predefined list or enter their own custom value. component combobox autocomplete dropdown typeahead overview\n\nthe combobox component provides both selection and text input capabilities. it\ndisplays a list of options that users can choose from, while also allowing them\nto type directly into the text field. this functionality improves user\nexperience by assisting with value selection and, in some cases, prevents\ninvalid entries.\n\nkey features\n\n- external state management: full control over async logic using react stately's useasynclist\n- debouncing: use usedebouncedcallback from use-debounce to ","titleNoSpaces":"combobox","descriptionNoSpaces":"acomboboxisaninputthatcombinesatextfieldwithapop-uplistofoptions.itallowsuserstoselectavaluefromapredefinedlistorentertheirowncustomvalue.","tagsNoSpaces":"componentcomboboxautocompletedropdowntypeahead","titleWords":["combo","box"],"descriptionWords":["a","combobox","is","an","input","that","combines","a","text","field","with","a","pop-up","list","of","options.","it","allows","users","to","select","a","value","from","a","predefined","list","or","enter","their","own","custom","value."],"tagsWords":["component","combobox","autocomplete","dropdown","typeahead"]}},{"id":"Components-Data Display","title":"Data Display","description":"Components for presenting data or visual content.","tags":["document"],"route":"components/data-display","menu":["Components","Data Display"],"content":"Data Display\n\nComponents for presenting data or visual content.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"data display","description":"components for presenting data or visual content.","tags":"document","content":"data display\n\ncomponents for presenting data or visual content.\n\n<categoryoverview variant=\"list\" />","combined":"data display components for presenting data or visual content. document data display\n\ncomponents for presenting data or visual content.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"datadisplay","descriptionNoSpaces":"componentsforpresentingdataorvisualcontent.","tagsNoSpaces":"document","titleWords":["data","display"],"descriptionWords":["components","for","presenting","data","or","visual","content."],"tagsWords":["document"]}},{"id":"Components-DataTable","title":"Data table","exportName":"DataTable","description":"Data tables display sets of data across rows and columns. Use them to organize information, enable comparisons, and allow users to inspect and interact with large datasets.","tags":["component","table","data"],"route":"components/data-display/data-table","menu":["Components","Data Display","Data table"],"content":"Overview\n\nData tables are essential tools for presenting sets of data in a structured\nformat, utilizing rows and columns to enhance clarity. They serve multiple\npurposes: organizing information systematically, facilitating comparisons\nbetween different data points, and providing users with the ability to\nthoroughly inspect and interact with extensive datasets. By incorporating\nfeatures such as sorting, filtering, and pagination, data tables empower users\nto navigate through large volumes of info","_lower":{"title":"data table","description":"data tables display sets of data across rows and columns. use them to organize information, enable comparisons, and allow users to inspect and interact with large datasets.","tags":"component table data","content":"overview\n\ndata tables are essential tools for presenting sets of data in a structured\nformat, utilizing rows and columns to enhance clarity. they serve multiple\npurposes: organizing information systematically, facilitating comparisons\nbetween different data points, and providing users with the ability to\nthoroughly inspect and interact with extensive datasets. by incorporating\nfeatures such as sorting, filtering, and pagination, data tables empower users\nto navigate through large volumes of info","combined":"data table data tables display sets of data across rows and columns. use them to organize information, enable comparisons, and allow users to inspect and interact with large datasets. component table data overview\n\ndata tables are essential tools for presenting sets of data in a structured\nformat, utilizing rows and columns to enhance clarity. they serve multiple\npurposes: organizing information systematically, facilitating comparisons\nbetween different data points, and providing users with the ability to\nthoroughly inspect and interact with extensive datasets. by incorporating\nfeatures such as sorting, filtering, and pagination, data tables empower users\nto navigate through large volumes of info","titleNoSpaces":"datatable","descriptionNoSpaces":"datatablesdisplaysetsofdataacrossrowsandcolumns.usethemtoorganizeinformation,enablecomparisons,andallowuserstoinspectandinteractwithlargedatasets.","tagsNoSpaces":"componenttabledata","titleWords":["data","table"],"descriptionWords":["data","tables","display","sets","of","data","across","rows","and","columns.","use","them","to","organize","information,","enable","comparisons,","and","allow","users","to","inspect","and","interact","with","large","datasets."],"tagsWords":["component","table","data"]}},{"id":"Components-DateInput","title":"Date input","exportName":"DateInput","description":"A date input component allows users to enter a specific date.","tags":["component","date","calendar"],"route":"components/inputs/date-input","menu":["Components","Inputs","Date input"],"content":"Overview\n\nThe date input field uses a conventional date format, such as mm/dd/yyyy, which\nis localized based on the user's region. Users can type a date directly into the\nfield. The component automatically formats the input as the user types.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma Link\nStorybook Link\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nMedium\n\n``jsx live\nconst App = () => <DateInput aria-label=\"Enter a date\"/>\n`\n\nSm","_lower":{"title":"date input","description":"a date input component allows users to enter a specific date.","tags":"component date calendar","content":"overview\n\nthe date input field uses a conventional date format, such as mm/dd/yyyy, which\nis localized based on the user's region. users can type a date directly into the\nfield. the component automatically formats the input as the user types.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma link\nstorybook link\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\nconst app = () => <dateinput aria-label=\"enter a date\"/>\n`\n\nsm","combined":"date input a date input component allows users to enter a specific date. component date calendar overview\n\nthe date input field uses a conventional date format, such as mm/dd/yyyy, which\nis localized based on the user's region. users can type a date directly into the\nfield. the component automatically formats the input as the user types.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma link\nstorybook link\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\nconst app = () => <dateinput aria-label=\"enter a date\"/>\n`\n\nsm","titleNoSpaces":"dateinput","descriptionNoSpaces":"adateinputcomponentallowsuserstoenteraspecificdate.","tagsNoSpaces":"componentdatecalendar","titleWords":["date","input"],"descriptionWords":["a","date","input","component","allows","users","to","enter","a","specific","date."],"tagsWords":["component","date","calendar"]}},{"id":"Components-DatePicker","title":"Date picker","exportName":"DatePicker","description":"A date picker is a UI component for users to input or select a specific calendar date.","tags":["component","date","calendar"],"route":"components/inputs/date-picker","menu":["Components","Inputs","Date picker"],"content":"Overview\n\nDate picker can be simple or complex, allowing users to select a single date and\nor specific times. There are two offered sizes, the default being medium for\nmost use cases.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nMedium\n\n``jsx live\n const App = () => <DatePicker size=\"md\" aria-label=\"Enter a date\" width=\"1/3\" />\n`\n\nSmall\n\n`jsx live\n const App = () => <DatePicker ","_lower":{"title":"date picker","description":"a date picker is a ui component for users to input or select a specific calendar date.","tags":"component date calendar","content":"overview\n\ndate picker can be simple or complex, allowing users to select a single date and\nor specific times. there are two offered sizes, the default being medium for\nmost use cases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\n const app = () => <datepicker size=\"md\" aria-label=\"enter a date\" width=\"1/3\" />\n`\n\nsmall\n\n`jsx live\n const app = () => <datepicker ","combined":"date picker a date picker is a ui component for users to input or select a specific calendar date. component date calendar overview\n\ndate picker can be simple or complex, allowing users to select a single date and\nor specific times. there are two offered sizes, the default being medium for\nmost use cases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\n const app = () => <datepicker size=\"md\" aria-label=\"enter a date\" width=\"1/3\" />\n`\n\nsmall\n\n`jsx live\n const app = () => <datepicker ","titleNoSpaces":"datepicker","descriptionNoSpaces":"adatepickerisauicomponentforuserstoinputorselectaspecificcalendardate.","tagsNoSpaces":"componentdatecalendar","titleWords":["date","picker"],"descriptionWords":["a","date","picker","is","a","ui","component","for","users","to","input","or","select","a","specific","calendar","date."],"tagsWords":["component","date","calendar"]}},{"id":"Components-DateRangePicker","title":"Date range picker","exportName":"DateRangePicker","description":"Allows users to select a start and end date from a calendar interface.","tags":["component","date","calendar"],"route":"components/inputs/date-range-picker","menu":["Components","Inputs","Date range picker"],"content":"Overview\n\nDate range pickers allow users to select a range of dates. The component\nincludes two date input fields for start and end dates, and a calendar that\nappears on focus. This component uses a single input field to contain both the\nstart and end dates. There are two offered sizes, the default being medium for\nmost use cases.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nMed","_lower":{"title":"date range picker","description":"allows users to select a start and end date from a calendar interface.","tags":"component date calendar","content":"overview\n\ndate range pickers allow users to select a range of dates. the component\nincludes two date input fields for start and end dates, and a calendar that\nappears on focus. this component uses a single input field to contain both the\nstart and end dates. there are two offered sizes, the default being medium for\nmost use cases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmed","combined":"date range picker allows users to select a start and end date from a calendar interface. component date calendar overview\n\ndate range pickers allow users to select a range of dates. the component\nincludes two date input fields for start and end dates, and a calendar that\nappears on focus. this component uses a single input field to contain both the\nstart and end dates. there are two offered sizes, the default being medium for\nmost use cases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmed","titleNoSpaces":"daterangepicker","descriptionNoSpaces":"allowsuserstoselectastartandenddatefromacalendarinterface.","tagsNoSpaces":"componentdatecalendar","titleWords":["date","range","picker"],"descriptionWords":["allows","users","to","select","a","start","and","end","date","from","a","calendar","interface."],"tagsWords":["component","date","calendar"]}},{"id":"Components-DefaultPage","title":"DefaultPage","exportName":"DefaultPage","description":"A layout component that structures pages into header, scrollable content, and optional footer zones. Supports optional back navigation for detail views, tab navigation, and sticky header/footer variants.","tags":["component","layout","default-page"],"route":"components/layout/defaultpage","menu":["Components","Layout","DefaultPage"],"content":"Overview\n\nDefaultPage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nThe presence or absence of DefaultPage.BackLink determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\nKey features\n\n- DefaultPage.Header — Two-column grid that positions Title and Subtitle on\n  the left and Actions on the right\n- DefaultPag","_lower":{"title":"defaultpage","description":"a layout component that structures pages into header, scrollable content, and optional footer zones. supports optional back navigation for detail views, tab navigation, and sticky header/footer variants.","tags":"component layout default-page","content":"overview\n\ndefaultpage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nthe presence or absence of defaultpage.backlink determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\nkey features\n\n- defaultpage.header — two-column grid that positions title and subtitle on\n  the left and actions on the right\n- defaultpag","combined":"defaultpage a layout component that structures pages into header, scrollable content, and optional footer zones. supports optional back navigation for detail views, tab navigation, and sticky header/footer variants. component layout default-page overview\n\ndefaultpage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nthe presence or absence of defaultpage.backlink determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\nkey features\n\n- defaultpage.header — two-column grid that positions title and subtitle on\n  the left and actions on the right\n- defaultpag","titleNoSpaces":"defaultpage","descriptionNoSpaces":"alayoutcomponentthatstructurespagesintoheader,scrollablecontent,andoptionalfooterzones.supportsoptionalbacknavigationfordetailviews,tabnavigation,andstickyheader/footervariants.","tagsNoSpaces":"componentlayoutdefault-page","titleWords":["defaultpage"],"descriptionWords":["a","layout","component","that","structures","pages","into","header,","scrollable","content,","and","optional","footer","zones.","supports","optional","back","navigation","for","detail","views,","tab","navigation,","and","sticky","header/footer","variants."],"tagsWords":["component","layout","default-page"]}},{"id":"Components-Dialog","title":"Dialog","exportName":"Dialog","description":"A foundational dialog component for overlays that require user attention and interaction. Built with React Aria Components for accessibility and WCAG 2.1 AA compliance.","tags":["component","overlay","dialog","modal","interactive"],"route":"components/feedback/dialog","menu":["Components","Feedback","Dialog"],"content":"Overview\n\nDialogs are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. They\ntemporarily disable the main interface until the user completes an action or\ndismisses the dialog.\n\nKey features\n\n- Accessibility First: Built with React Aria Components for WCAG 2.1 AA\n  compliance\n- Flexible Positioning: Support for center, top, and bottom placements\n- Responsive Sizing: Multiple size variants from xs to full-screen\n-","_lower":{"title":"dialog","description":"a foundational dialog component for overlays that require user attention and interaction. built with react aria components for accessibility and wcag 2.1 aa compliance.","tags":"component overlay dialog modal interactive","content":"overview\n\ndialogs are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. they\ntemporarily disable the main interface until the user completes an action or\ndismisses the dialog.\n\nkey features\n\n- accessibility first: built with react aria components for wcag 2.1 aa\n  compliance\n- flexible positioning: support for center, top, and bottom placements\n- responsive sizing: multiple size variants from xs to full-screen\n-","combined":"dialog a foundational dialog component for overlays that require user attention and interaction. built with react aria components for accessibility and wcag 2.1 aa compliance. component overlay dialog modal interactive overview\n\ndialogs are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. they\ntemporarily disable the main interface until the user completes an action or\ndismisses the dialog.\n\nkey features\n\n- accessibility first: built with react aria components for wcag 2.1 aa\n  compliance\n- flexible positioning: support for center, top, and bottom placements\n- responsive sizing: multiple size variants from xs to full-screen\n-","titleNoSpaces":"dialog","descriptionNoSpaces":"afoundationaldialogcomponentforoverlaysthatrequireuserattentionandinteraction.builtwithreactariacomponentsforaccessibilityandwcag2.1aacompliance.","tagsNoSpaces":"componentoverlaydialogmodalinteractive","titleWords":["dialog"],"descriptionWords":["a","foundational","dialog","component","for","overlays","that","require","user","attention","and","interaction.","built","with","react","aria","components","for","accessibility","and","wcag","2.1","aa","compliance."],"tagsWords":["component","overlay","dialog","modal","interactive"]}},{"id":"Components-DraggableList","title":"Draggable list","exportName":"DraggableList","description":"The draggable list allows users to easily reorder or manage a sequence of items via a direct drag-and-drop interaction.","tags":["component","lists","drag and drop","interactive"],"route":"components/data-display/draggable-list","menu":["Components","Data Display","Draggable list"],"content":"Overview\n\nThe draggable list component presents structured, ordered content where the\nsequence itself is meaningful. It uses visual and functional cues to enable\nusers to physically manipulate the list order by dragging an item to a new\ninsertion point, providing immediate visual feedback throughout the process.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\nReact Aria Docs\n\nVariables\n\nGet familiar with the features.\n\nInteractions","_lower":{"title":"draggable list","description":"the draggable list allows users to easily reorder or manage a sequence of items via a direct drag-and-drop interaction.","tags":"component lists drag and drop interactive","content":"overview\n\nthe draggable list component presents structured, ordered content where the\nsequence itself is meaningful. it uses visual and functional cues to enable\nusers to physically manipulate the list order by dragging an item to a new\ninsertion point, providing immediate visual feedback throughout the process.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\nreact aria docs\n\nvariables\n\nget familiar with the features.\n\ninteractions","combined":"draggable list the draggable list allows users to easily reorder or manage a sequence of items via a direct drag-and-drop interaction. component lists drag and drop interactive overview\n\nthe draggable list component presents structured, ordered content where the\nsequence itself is meaningful. it uses visual and functional cues to enable\nusers to physically manipulate the list order by dragging an item to a new\ninsertion point, providing immediate visual feedback throughout the process.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\nreact aria docs\n\nvariables\n\nget familiar with the features.\n\ninteractions","titleNoSpaces":"draggablelist","descriptionNoSpaces":"thedraggablelistallowsuserstoeasilyreorderormanageasequenceofitemsviaadirectdrag-and-dropinteraction.","tagsNoSpaces":"componentlistsdraganddropinteractive","titleWords":["draggable","list"],"descriptionWords":["the","draggable","list","allows","users","to","easily","reorder","or","manage","a","sequence","of","items","via","a","direct","drag-and-drop","interaction."],"tagsWords":["component","lists","drag","and","drop","interactive"]}},{"id":"Components-Drawer","title":"Drawer","exportName":"Drawer","description":"A foundational drawer component for overlays that require user attention and interaction. Built with React Aria Components for accessibility and WCAG 2.1 AA compliance.","tags":["component","overlay","dialog","modal","interactive"],"route":"components/feedback/drawer","menu":["Components","Feedback","Drawer"],"content":"Overview\n\nDrawers are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. They\ntemporarily disable the main interface until the user completes an action or\ndismisses the drawer.\n\nKey features\n\n- Accessibility First: Built with React Aria Components for WCAG 2.1 AA\n  compliance\n- Flexible Positioning: Support for left, right, top, and bottom placements\n- Responsive Sizing: Multiple size variants from xs to full-scr","_lower":{"title":"drawer","description":"a foundational drawer component for overlays that require user attention and interaction. built with react aria components for accessibility and wcag 2.1 aa compliance.","tags":"component overlay dialog modal interactive","content":"overview\n\ndrawers are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. they\ntemporarily disable the main interface until the user completes an action or\ndismisses the drawer.\n\nkey features\n\n- accessibility first: built with react aria components for wcag 2.1 aa\n  compliance\n- flexible positioning: support for left, right, top, and bottom placements\n- responsive sizing: multiple size variants from xs to full-scr","combined":"drawer a foundational drawer component for overlays that require user attention and interaction. built with react aria components for accessibility and wcag 2.1 aa compliance. component overlay dialog modal interactive overview\n\ndrawers are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. they\ntemporarily disable the main interface until the user completes an action or\ndismisses the drawer.\n\nkey features\n\n- accessibility first: built with react aria components for wcag 2.1 aa\n  compliance\n- flexible positioning: support for left, right, top, and bottom placements\n- responsive sizing: multiple size variants from xs to full-scr","titleNoSpaces":"drawer","descriptionNoSpaces":"afoundationaldrawercomponentforoverlaysthatrequireuserattentionandinteraction.builtwithreactariacomponentsforaccessibilityandwcag2.1aacompliance.","tagsNoSpaces":"componentoverlaydialogmodalinteractive","titleWords":["drawer"],"descriptionWords":["a","foundational","drawer","component","for","overlays","that","require","user","attention","and","interaction.","built","with","react","aria","components","for","accessibility","and","wcag","2.1","aa","compliance."],"tagsWords":["component","overlay","dialog","modal","interactive"]}},{"id":"Components-Feedback","title":"Feedback","description":"Components for providing user feedback.","tags":["document"],"route":"components/feedback","menu":["Components","Feedback"],"content":"Feedback\n\nComponents for providing user feedback.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"feedback","description":"components for providing user feedback.","tags":"document","content":"feedback\n\ncomponents for providing user feedback.\n\n<categoryoverview variant=\"list\" />","combined":"feedback components for providing user feedback. document feedback\n\ncomponents for providing user feedback.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"feedback","descriptionNoSpaces":"componentsforprovidinguserfeedback.","tagsNoSpaces":"document","titleWords":["feedback"],"descriptionWords":["components","for","providing","user","feedback."],"tagsWords":["document"]}},{"id":"Components-FieldErrors","title":"Field errors","exportName":"FieldErrors","description":"Context specific, localized error messages for individual form fields.","tags":["component","form","validation","errors"],"route":"components/forms/field-errors","menu":["Components","Forms","Field errors"],"content":"Overview\n\nThe field errors component is a vital utility for user-friendly form validation,\nresponsible for displaying context-specific, localized error messages for\nindividual form fields. It ensures users receive clear, immediate feedback on\nvalidation issues, maintaining a consistent and accessible experience.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nVisual elements\n\nColor: Defa","_lower":{"title":"field errors","description":"context specific, localized error messages for individual form fields.","tags":"component form validation errors","content":"overview\n\nthe field errors component is a vital utility for user-friendly form validation,\nresponsible for displaying context-specific, localized error messages for\nindividual form fields. it ensures users receive clear, immediate feedback on\nvalidation issues, maintaining a consistent and accessible experience.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual elements\n\ncolor: defa","combined":"field errors context specific, localized error messages for individual form fields. component form validation errors overview\n\nthe field errors component is a vital utility for user-friendly form validation,\nresponsible for displaying context-specific, localized error messages for\nindividual form fields. it ensures users receive clear, immediate feedback on\nvalidation issues, maintaining a consistent and accessible experience.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual elements\n\ncolor: defa","titleNoSpaces":"fielderrors","descriptionNoSpaces":"contextspecific,localizederrormessagesforindividualformfields.","tagsNoSpaces":"componentformvalidationerrors","titleWords":["field","errors"],"descriptionWords":["context","specific,","localized","error","messages","for","individual","form","fields."],"tagsWords":["component","form","validation","errors"]}},{"id":"Components-Flex","title":"Flex","exportName":"Flex","description":"Flex is a layout component that provides a convenient way to create flexible layouts based on CSS Flexbox. It's based on the Chakra UI Flex component and supports all style props for rapid UI development.","tags":["component","flex","flexbox","layout"],"route":"components/layout/flex","menu":["Components","Layout","Flex"],"content":"Overview\n\nThe Flex component is essentially a Box component with display: flex applied\nby default. It provides an intuitive API for creating flexible layouts and\nsupports all flexbox properties.\n\nKey features\n\n- Flexbox by default: Automatically applies display: flex\n- Style props: Supports all Chakra UI style props for rapid development\n- Responsive design: Easily create responsive layouts with responsive props\n- Semantic HTML: Can render as any HTML element using the as prop\n\nResources\n\nLearn ","_lower":{"title":"flex","description":"flex is a layout component that provides a convenient way to create flexible layouts based on css flexbox. it's based on the chakra ui flex component and supports all style props for rapid ui development.","tags":"component flex flexbox layout","content":"overview\n\nthe flex component is essentially a box component with display: flex applied\nby default. it provides an intuitive api for creating flexible layouts and\nsupports all flexbox properties.\n\nkey features\n\n- flexbox by default: automatically applies display: flex\n- style props: supports all chakra ui style props for rapid development\n- responsive design: easily create responsive layouts with responsive props\n- semantic html: can render as any html element using the as prop\n\nresources\n\nlearn ","combined":"flex flex is a layout component that provides a convenient way to create flexible layouts based on css flexbox. it's based on the chakra ui flex component and supports all style props for rapid ui development. component flex flexbox layout overview\n\nthe flex component is essentially a box component with display: flex applied\nby default. it provides an intuitive api for creating flexible layouts and\nsupports all flexbox properties.\n\nkey features\n\n- flexbox by default: automatically applies display: flex\n- style props: supports all chakra ui style props for rapid development\n- responsive design: easily create responsive layouts with responsive props\n- semantic html: can render as any html element using the as prop\n\nresources\n\nlearn ","titleNoSpaces":"flex","descriptionNoSpaces":"flexisalayoutcomponentthatprovidesaconvenientwaytocreateflexiblelayoutsbasedoncssflexbox.it'sbasedonthechakrauiflexcomponentandsupportsallstylepropsforrapiduidevelopment.","tagsNoSpaces":"componentflexflexboxlayout","titleWords":["flex"],"descriptionWords":["flex","is","a","layout","component","that","provides","a","convenient","way","to","create","flexible","layouts","based","on","css","flexbox.","it's","based","on","the","chakra","ui","flex","component","and","supports","all","style","props","for","rapid","ui","development."],"tagsWords":["component","flex","flexbox","layout"]}},{"id":"Components-FormField","title":"Form field","exportName":"FormField","description":"Form fields are the building blocks of user interaction, collecting essential data, facilitating actions, and enabling customization within digital interfaces.","tags":["component","form","field","label","input wrapper"],"route":"components/forms/form-field","menu":["Components","Forms","Form field"],"content":"Overview\n\nComposed of several elements, a label, optional helper icon, a text input. There\nis also an optional helper text feature that presents at the bottom of the\nfield.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nLabel options\n\nSimple\n\nLabel is used to describe the form.\n\n``jsx live\nconst App = () => {\n  const [val, setVal] = useState('Input value');\n\n  return (\n    <FormField.Root>\n      ","_lower":{"title":"form field","description":"form fields are the building blocks of user interaction, collecting essential data, facilitating actions, and enabling customization within digital interfaces.","tags":"component form field label input wrapper","content":"overview\n\ncomposed of several elements, a label, optional helper icon, a text input. there\nis also an optional helper text feature that presents at the bottom of the\nfield.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nlabel options\n\nsimple\n\nlabel is used to describe the form.\n\n``jsx live\nconst app = () => {\n  const [val, setval] = usestate('input value');\n\n  return (\n    <formfield.root>\n      ","combined":"form field form fields are the building blocks of user interaction, collecting essential data, facilitating actions, and enabling customization within digital interfaces. component form field label input wrapper overview\n\ncomposed of several elements, a label, optional helper icon, a text input. there\nis also an optional helper text feature that presents at the bottom of the\nfield.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nlabel options\n\nsimple\n\nlabel is used to describe the form.\n\n``jsx live\nconst app = () => {\n  const [val, setval] = usestate('input value');\n\n  return (\n    <formfield.root>\n      ","titleNoSpaces":"formfield","descriptionNoSpaces":"formfieldsarethebuildingblocksofuserinteraction,collectingessentialdata,facilitatingactions,andenablingcustomizationwithindigitalinterfaces.","tagsNoSpaces":"componentformfieldlabelinputwrapper","titleWords":["form","field"],"descriptionWords":["form","fields","are","the","building","blocks","of","user","interaction,","collecting","essential","data,","facilitating","actions,","and","enabling","customization","within","digital","interfaces."],"tagsWords":["component","form","field","label","input","wrapper"]}},{"id":"Components-Forms","title":"Forms","description":"Components for form validation, localization, and error handling.","tags":["forms","validation","errors","localization"],"route":"components/forms","menu":["Components","Forms"],"content":"Forms\n\nComponents for form validation, localization, and error handling.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"forms","description":"components for form validation, localization, and error handling.","tags":"forms validation errors localization","content":"forms\n\ncomponents for form validation, localization, and error handling.\n\n<categoryoverview variant=\"list\" />","combined":"forms components for form validation, localization, and error handling. forms validation errors localization forms\n\ncomponents for form validation, localization, and error handling.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"forms","descriptionNoSpaces":"componentsforformvalidation,localization,anderrorhandling.","tagsNoSpaces":"formsvalidationerrorslocalization","titleWords":["forms"],"descriptionWords":["components","for","form","validation,","localization,","and","error","handling."],"tagsWords":["forms","validation","errors","localization"]}},{"id":"Components-Grid","title":"Grid","exportName":"Grid","description":"The Grid Layout Component provides a flexible and responsive way to structure content using a two-dimensional grid system. It allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes. The component accepts all the chakra supported properties and Grid.Item as children elements.","tags":["component","grid","layout","columns","rows"],"route":"components/layout/grid","menu":["Components","Layout","Grid"],"content":"Basic usage\n\nUse Grid → When you need fine control over layout, spanning, and custom grid\nbehaviors.\n\n``jsx\nimport { Grid } from \"@commercetools/nimbus\";\n`\n\nTo use the Grid layout, ensure to wrap the individual grid items inside of the\n<Grid.Item> component\n\n`jsx live\nconst App = () => (\n  <Grid gap=\"100\">\n    <Grid.Item>\n      <Box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        Item 1\n      </Box>\n    </Grid.Item>\n    <Grid.Item>\n      <Box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        Item 2\n      </Box>\n ","_lower":{"title":"grid","description":"the grid layout component provides a flexible and responsive way to structure content using a two-dimensional grid system. it allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes. the component accepts all the chakra supported properties and grid.item as children elements.","tags":"component grid layout columns rows","content":"basic usage\n\nuse grid → when you need fine control over layout, spanning, and custom grid\nbehaviors.\n\n``jsx\nimport { grid } from \"@commercetools/nimbus\";\n`\n\nto use the grid layout, ensure to wrap the individual grid items inside of the\n<grid.item> component\n\n`jsx live\nconst app = () => (\n  <grid gap=\"100\">\n    <grid.item>\n      <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        item 1\n      </box>\n    </grid.item>\n    <grid.item>\n      <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        item 2\n      </box>\n ","combined":"grid the grid layout component provides a flexible and responsive way to structure content using a two-dimensional grid system. it allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes. the component accepts all the chakra supported properties and grid.item as children elements. component grid layout columns rows basic usage\n\nuse grid → when you need fine control over layout, spanning, and custom grid\nbehaviors.\n\n``jsx\nimport { grid } from \"@commercetools/nimbus\";\n`\n\nto use the grid layout, ensure to wrap the individual grid items inside of the\n<grid.item> component\n\n`jsx live\nconst app = () => (\n  <grid gap=\"100\">\n    <grid.item>\n      <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        item 1\n      </box>\n    </grid.item>\n    <grid.item>\n      <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        item 2\n      </box>\n ","titleNoSpaces":"grid","descriptionNoSpaces":"thegridlayoutcomponentprovidesaflexibleandresponsivewaytostructurecontentusingatwo-dimensionalgridsystem.itallowselementstobearrangedinrowsandcolumns,enablingdynamicandefficientlayoutsfordifferentscreensizes.thecomponentacceptsallthechakrasupportedpropertiesandgrid.itemaschildrenelements.","tagsNoSpaces":"componentgridlayoutcolumnsrows","titleWords":["grid"],"descriptionWords":["the","grid","layout","component","provides","a","flexible","and","responsive","way","to","structure","content","using","a","two-dimensional","grid","system.","it","allows","elements","to","be","arranged","in","rows","and","columns,","enabling","dynamic","and","efficient","layouts","for","different","screen","sizes.","the","component","accepts","all","the","chakra","supported","properties","and","grid.item","as","children","elements."],"tagsWords":["component","grid","layout","columns","rows"]}},{"id":"Components-Group","title":"Group","exportName":"Group","description":"Groups related elements together for better organization and layout.","tags":["component","group","fieldset","form","cluster"],"route":"components/forms/group","menu":["Components","Forms","Group"],"content":"Overview\n\nThe Group component provides a flexible way to group related UI elements with\nconsistent spacing and alignment. It's particularly useful for creating forms,\ntoolbars, and other collections of interactive elements.\n\nVariables\n\nGet familiar with the features.\n\nBasic Usage\n\n``jsx live\nconst App = () => (\n  <Group>\n    <Button>First</Button>\n    <Button>Second</Button>\n    <Button>Third</Button>\n  </Group>\n)\n``","_lower":{"title":"group","description":"groups related elements together for better organization and layout.","tags":"component group fieldset form cluster","content":"overview\n\nthe group component provides a flexible way to group related ui elements with\nconsistent spacing and alignment. it's particularly useful for creating forms,\ntoolbars, and other collections of interactive elements.\n\nvariables\n\nget familiar with the features.\n\nbasic usage\n\n``jsx live\nconst app = () => (\n  <group>\n    <button>first</button>\n    <button>second</button>\n    <button>third</button>\n  </group>\n)\n``","combined":"group groups related elements together for better organization and layout. component group fieldset form cluster overview\n\nthe group component provides a flexible way to group related ui elements with\nconsistent spacing and alignment. it's particularly useful for creating forms,\ntoolbars, and other collections of interactive elements.\n\nvariables\n\nget familiar with the features.\n\nbasic usage\n\n``jsx live\nconst app = () => (\n  <group>\n    <button>first</button>\n    <button>second</button>\n    <button>third</button>\n  </group>\n)\n``","titleNoSpaces":"group","descriptionNoSpaces":"groupsrelatedelementstogetherforbetterorganizationandlayout.","tagsNoSpaces":"componentgroupfieldsetformcluster","titleWords":["group"],"descriptionWords":["groups","related","elements","together","for","better","organization","and","layout."],"tagsWords":["component","group","fieldset","form","cluster"]}},{"id":"Components-Heading","title":"Heading","exportName":"Heading","description":"The heading component establishes typographic hierarchy throughout the product experience. It is crucial for organizing content, defining page structure, and improving content scan ability.","tags":["component","typography","heading"],"route":"components/typography/heading","menu":["Components","Typography","Heading"],"content":"Overview\n\nGood headings are essential for organizing information and engaging users. They\nclearly communicate the content's topic, making the page scannable and easier to\nnavigate. Effective headlines also improve accessibility for screen readers and\naid search engine optimization (SEO) by defining content relevance.\n\nResources\n\nDeep dive on details and access design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nTypographic scale and hierarchy\n\nThese text styles are the re","_lower":{"title":"heading","description":"the heading component establishes typographic hierarchy throughout the product experience. it is crucial for organizing content, defining page structure, and improving content scan ability.","tags":"component typography heading","content":"overview\n\ngood headings are essential for organizing information and engaging users. they\nclearly communicate the content's topic, making the page scannable and easier to\nnavigate. effective headlines also improve accessibility for screen readers and\naid search engine optimization (seo) by defining content relevance.\n\nresources\n\ndeep dive on details and access design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntypographic scale and hierarchy\n\nthese text styles are the re","combined":"heading the heading component establishes typographic hierarchy throughout the product experience. it is crucial for organizing content, defining page structure, and improving content scan ability. component typography heading overview\n\ngood headings are essential for organizing information and engaging users. they\nclearly communicate the content's topic, making the page scannable and easier to\nnavigate. effective headlines also improve accessibility for screen readers and\naid search engine optimization (seo) by defining content relevance.\n\nresources\n\ndeep dive on details and access design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntypographic scale and hierarchy\n\nthese text styles are the re","titleNoSpaces":"heading","descriptionNoSpaces":"theheadingcomponentestablishestypographichierarchythroughouttheproductexperience.itiscrucialfororganizingcontent,definingpagestructure,andimprovingcontentscanability.","tagsNoSpaces":"componenttypographyheading","titleWords":["heading"],"descriptionWords":["the","heading","component","establishes","typographic","hierarchy","throughout","the","product","experience.","it","is","crucial","for","organizing","content,","defining","page","structure,","and","improving","content","scan","ability."],"tagsWords":["component","typography","heading"]}},{"id":"Components-Icon","title":"Icon","exportName":"Icon","description":"An icon is a small graphical symbol used to represent an object, action, or idea within a user interface.","tags":["component","icon","svg","graphic","symbol"],"route":"components/media/icon","menu":["Components","Media","Icon"],"content":"Overview\n\nNimbus uses the Material Design icon library and adds custom SVG icons.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nMaterial Design Icon Library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nDefault and in color\n\n``jsx live\nconst App = () => (\n  <Stack direction=\"row\">\n    <Icon size=\"xs\"><Icons.SentimentSatisfied /></Icon>\n    <Icon size=\"xs\" color=\"primary.11\"><Icons.SentimentSatisfied /></Icon>\n    <Icon size=\"xs\" color=\"in","_lower":{"title":"icon","description":"an icon is a small graphical symbol used to represent an object, action, or idea within a user interface.","tags":"component icon svg graphic symbol","content":"overview\n\nnimbus uses the material design icon library and adds custom svg icons.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nmaterial design icon library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndefault and in color\n\n``jsx live\nconst app = () => (\n  <stack direction=\"row\">\n    <icon size=\"xs\"><icons.sentimentsatisfied /></icon>\n    <icon size=\"xs\" color=\"primary.11\"><icons.sentimentsatisfied /></icon>\n    <icon size=\"xs\" color=\"in","combined":"icon an icon is a small graphical symbol used to represent an object, action, or idea within a user interface. component icon svg graphic symbol overview\n\nnimbus uses the material design icon library and adds custom svg icons.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nmaterial design icon library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndefault and in color\n\n``jsx live\nconst app = () => (\n  <stack direction=\"row\">\n    <icon size=\"xs\"><icons.sentimentsatisfied /></icon>\n    <icon size=\"xs\" color=\"primary.11\"><icons.sentimentsatisfied /></icon>\n    <icon size=\"xs\" color=\"in","titleNoSpaces":"icon","descriptionNoSpaces":"aniconisasmallgraphicalsymbolusedtorepresentanobject,action,orideawithinauserinterface.","tagsNoSpaces":"componenticonsvggraphicsymbol","titleWords":["icon"],"descriptionWords":["an","icon","is","a","small","graphical","symbol","used","to","represent","an","object,","action,","or","idea","within","a","user","interface."],"tagsWords":["component","icon","svg","graphic","symbol"]}},{"id":"Components-IconButton","title":"Icon button","exportName":"IconButton","description":"Provides a compact and visually efficient way to represent actions, especially when space is limited or the action is universally understood.","tags":["component","buttons","actions","icons"],"route":"components/buttons/icon-button","menu":["Components","Buttons","Icon button"],"content":"Overview\n\nThese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nHierarchy\n\nMost common: Ghost\n\nGhost icon buttons are used most often, the represent familiar actions that\ndon't compete with a primary action on the page.\n\n``jsx live\nconst App = () => {\n  return (\n    <IconButton varia","_lower":{"title":"icon button","description":"provides a compact and visually efficient way to represent actions, especially when space is limited or the action is universally understood.","tags":"component buttons actions icons","content":"overview\n\nthese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nhierarchy\n\nmost common: ghost\n\nghost icon buttons are used most often, the represent familiar actions that\ndon't compete with a primary action on the page.\n\n``jsx live\nconst app = () => {\n  return (\n    <iconbutton varia","combined":"icon button provides a compact and visually efficient way to represent actions, especially when space is limited or the action is universally understood. component buttons actions icons overview\n\nthese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nhierarchy\n\nmost common: ghost\n\nghost icon buttons are used most often, the represent familiar actions that\ndon't compete with a primary action on the page.\n\n``jsx live\nconst app = () => {\n  return (\n    <iconbutton varia","titleNoSpaces":"iconbutton","descriptionNoSpaces":"providesacompactandvisuallyefficientwaytorepresentactions,especiallywhenspaceislimitedortheactionisuniversallyunderstood.","tagsNoSpaces":"componentbuttonsactionsicons","titleWords":["icon","button"],"descriptionWords":["provides","a","compact","and","visually","efficient","way","to","represent","actions,","especially","when","space","is","limited","or","the","action","is","universally","understood."],"tagsWords":["component","buttons","actions","icons"]}},{"id":"Components-IconToggleButton","title":"Icon toggle button","exportName":"IconToggleButton","description":"An interactive icon button that toggles between two binary states such as active and inactive.","tags":["component","buttons","toggle","icon","controls"],"route":"components/buttons/icon-toggle-button","menu":["Components","Buttons","Icon toggle button"],"content":"Overview\n\nAn icon toggle button is used similarly to a checkbox or a radio button, but\nsupports a smaller interactive component that can be used to give a binary\nactive state choice to users that can be used alone or in combination with other\nchoices. A toggle button or icon toggle button gives a user a new way of\nvisualizing the information in the interface. It does not typically perform an\naction. Please use a button or an icon button for these uses.\n\nResources\n\nDeep dive into implementation d","_lower":{"title":"icon toggle button","description":"an interactive icon button that toggles between two binary states such as active and inactive.","tags":"component buttons toggle icon controls","content":"overview\n\nan icon toggle button is used similarly to a checkbox or a radio button, but\nsupports a smaller interactive component that can be used to give a binary\nactive state choice to users that can be used alone or in combination with other\nchoices. a toggle button or icon toggle button gives a user a new way of\nvisualizing the information in the interface. it does not typically perform an\naction. please use a button or an icon button for these uses.\n\nresources\n\ndeep dive into implementation d","combined":"icon toggle button an interactive icon button that toggles between two binary states such as active and inactive. component buttons toggle icon controls overview\n\nan icon toggle button is used similarly to a checkbox or a radio button, but\nsupports a smaller interactive component that can be used to give a binary\nactive state choice to users that can be used alone or in combination with other\nchoices. a toggle button or icon toggle button gives a user a new way of\nvisualizing the information in the interface. it does not typically perform an\naction. please use a button or an icon button for these uses.\n\nresources\n\ndeep dive into implementation d","titleNoSpaces":"icontogglebutton","descriptionNoSpaces":"aninteractiveiconbuttonthattogglesbetweentwobinarystatessuchasactiveandinactive.","tagsNoSpaces":"componentbuttonstoggleiconcontrols","titleWords":["icon","toggle","button"],"descriptionWords":["an","interactive","icon","button","that","toggles","between","two","binary","states","such","as","active","and","inactive."],"tagsWords":["component","buttons","toggle","icon","controls"]}},{"id":"Components-Image","title":"Image","exportName":"Image","description":"An image component is used to display visual content like photographs, illustrations, or graphics within the UI to support, illustrate, or enhance textual information.","tags":["component","image","picture","media"],"route":"components/media/image","menu":["Components","Media","Image"],"content":"Overview\n\nThe image component offers core features designed for optimal performance,\naccessibility, and responsiveness when displaying visual content.\n\nBasic functions\n\n``jsx live\nconst App = () => (\n  <Image\n    src=\"/images/image/image-sample.png\"\n    alt=\"Example image showing basic functionality\"\n    width=\"100%\"\n    maxWidth=\"9600\"\n  />\n)\n`\n\n- Source set (srcSet) and sizes: This allows the component to define\n  multiple image sources at different resolutions, enabling the browser to\n  autom","_lower":{"title":"image","description":"an image component is used to display visual content like photographs, illustrations, or graphics within the ui to support, illustrate, or enhance textual information.","tags":"component image picture media","content":"overview\n\nthe image component offers core features designed for optimal performance,\naccessibility, and responsiveness when displaying visual content.\n\nbasic functions\n\n``jsx live\nconst app = () => (\n  <image\n    src=\"/images/image/image-sample.png\"\n    alt=\"example image showing basic functionality\"\n    width=\"100%\"\n    maxwidth=\"9600\"\n  />\n)\n`\n\n- source set (srcset) and sizes: this allows the component to define\n  multiple image sources at different resolutions, enabling the browser to\n  autom","combined":"image an image component is used to display visual content like photographs, illustrations, or graphics within the ui to support, illustrate, or enhance textual information. component image picture media overview\n\nthe image component offers core features designed for optimal performance,\naccessibility, and responsiveness when displaying visual content.\n\nbasic functions\n\n``jsx live\nconst app = () => (\n  <image\n    src=\"/images/image/image-sample.png\"\n    alt=\"example image showing basic functionality\"\n    width=\"100%\"\n    maxwidth=\"9600\"\n  />\n)\n`\n\n- source set (srcset) and sizes: this allows the component to define\n  multiple image sources at different resolutions, enabling the browser to\n  autom","titleNoSpaces":"image","descriptionNoSpaces":"animagecomponentisusedtodisplayvisualcontentlikephotographs,illustrations,orgraphicswithintheuitosupport,illustrate,orenhancetextualinformation.","tagsNoSpaces":"componentimagepicturemedia","titleWords":["image"],"descriptionWords":["an","image","component","is","used","to","display","visual","content","like","photographs,","illustrations,","or","graphics","within","the","ui","to","support,","illustrate,","or","enhance","textual","information."],"tagsWords":["component","image","picture","media"]}},{"id":"Components-InlineSvg","title":"Inline svg","exportName":"InlineSvg","description":"The InlineSvg component allows you to render arbitrary SVG markup as an icon with built-in XSS protection. It sanitizes the provided SVG string to remove potentially dangerous elements and attributes before rendering.","tags":["component","svg","icon","inline","security"],"route":"components/media/inline-svg","menu":["Components","Media","Inline svg"],"content":"Key features\n\n- Security First: Automatic sanitization of SVG content to prevent XSS\n  attacks\n- API Compatible: Drop-in replacement for existing InlineSvg implementations\n- Accessibility: Support for title and description elements\n- Consistent Styling: Uses the same recipe system as the Icon component\n- Performance: Memoized sanitization for optimal re-renders\n- Zero External Dependencies: Uses native browser APIs for parsing and\n  sanitization\n\nBasic usage\n\n``jsx live\nconst App = () => {\n  con","_lower":{"title":"inline svg","description":"the inlinesvg component allows you to render arbitrary svg markup as an icon with built-in xss protection. it sanitizes the provided svg string to remove potentially dangerous elements and attributes before rendering.","tags":"component svg icon inline security","content":"key features\n\n- security first: automatic sanitization of svg content to prevent xss\n  attacks\n- api compatible: drop-in replacement for existing inlinesvg implementations\n- accessibility: support for title and description elements\n- consistent styling: uses the same recipe system as the icon component\n- performance: memoized sanitization for optimal re-renders\n- zero external dependencies: uses native browser apis for parsing and\n  sanitization\n\nbasic usage\n\n``jsx live\nconst app = () => {\n  con","combined":"inline svg the inlinesvg component allows you to render arbitrary svg markup as an icon with built-in xss protection. it sanitizes the provided svg string to remove potentially dangerous elements and attributes before rendering. component svg icon inline security key features\n\n- security first: automatic sanitization of svg content to prevent xss\n  attacks\n- api compatible: drop-in replacement for existing inlinesvg implementations\n- accessibility: support for title and description elements\n- consistent styling: uses the same recipe system as the icon component\n- performance: memoized sanitization for optimal re-renders\n- zero external dependencies: uses native browser apis for parsing and\n  sanitization\n\nbasic usage\n\n``jsx live\nconst app = () => {\n  con","titleNoSpaces":"inlinesvg","descriptionNoSpaces":"theinlinesvgcomponentallowsyoutorenderarbitrarysvgmarkupasaniconwithbuilt-inxssprotection.itsanitizestheprovidedsvgstringtoremovepotentiallydangerouselementsandattributesbeforerendering.","tagsNoSpaces":"componentsvgiconinlinesecurity","titleWords":["inline","svg"],"descriptionWords":["the","inlinesvg","component","allows","you","to","render","arbitrary","svg","markup","as","an","icon","with","built-in","xss","protection.","it","sanitizes","the","provided","svg","string","to","remove","potentially","dangerous","elements","and","attributes","before","rendering."],"tagsWords":["component","svg","icon","inline","security"]}},{"id":"Components-Inputs","title":"Inputs","description":"Form controls for data entry and selection","tags":["forms"],"route":"components/inputs","menu":["Components","Inputs"],"content":"Inputs\n\nForm controls for data entry and selection.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"inputs","description":"form controls for data entry and selection","tags":"forms","content":"inputs\n\nform controls for data entry and selection.\n\n<categoryoverview variant=\"list\" />","combined":"inputs form controls for data entry and selection forms inputs\n\nform controls for data entry and selection.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"inputs","descriptionNoSpaces":"formcontrolsfordataentryandselection","tagsNoSpaces":"forms","titleWords":["inputs"],"descriptionWords":["form","controls","for","data","entry","and","selection"],"tagsWords":["forms"]}},{"id":"Components-Kbd","title":"Kbd","exportName":"Kbd","description":"The KBD component visually renders a keystroke or key combination to highlight it within textual instructions.","tags":["component","keyboard","key"],"route":"components/typography/kbd","menu":["Components","Typography","Kbd"],"content":"Overview\n\nThe keyboard key component provides semantic and visual representation for\nkeyboard input, such as a shortcut, key press, or command line input, ensuring\nclarity and consistency when providing user instructions.\n\nVariables\n\nGet familiar with the features.\n\nBasic\n\n``jsx live\nconst App = () => <Kbd>Ctrl</Kbd>\n`\n\nKey combinations\n\n`jsx live\nconst App = () => <div>Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy</div>\n``","_lower":{"title":"kbd","description":"the kbd component visually renders a keystroke or key combination to highlight it within textual instructions.","tags":"component keyboard key","content":"overview\n\nthe keyboard key component provides semantic and visual representation for\nkeyboard input, such as a shortcut, key press, or command line input, ensuring\nclarity and consistency when providing user instructions.\n\nvariables\n\nget familiar with the features.\n\nbasic\n\n``jsx live\nconst app = () => <kbd>ctrl</kbd>\n`\n\nkey combinations\n\n`jsx live\nconst app = () => <div>press <kbd>ctrl</kbd> + <kbd>c</kbd> to copy</div>\n``","combined":"kbd the kbd component visually renders a keystroke or key combination to highlight it within textual instructions. component keyboard key overview\n\nthe keyboard key component provides semantic and visual representation for\nkeyboard input, such as a shortcut, key press, or command line input, ensuring\nclarity and consistency when providing user instructions.\n\nvariables\n\nget familiar with the features.\n\nbasic\n\n``jsx live\nconst app = () => <kbd>ctrl</kbd>\n`\n\nkey combinations\n\n`jsx live\nconst app = () => <div>press <kbd>ctrl</kbd> + <kbd>c</kbd> to copy</div>\n``","titleNoSpaces":"kbd","descriptionNoSpaces":"thekbdcomponentvisuallyrendersakeystrokeorkeycombinationtohighlightitwithintextualinstructions.","tagsNoSpaces":"componentkeyboardkey","titleWords":["kbd"],"descriptionWords":["the","kbd","component","visually","renders","a","keystroke","or","key","combination","to","highlight","it","within","textual","instructions."],"tagsWords":["component","keyboard","key"]}},{"id":"Components-link","title":"Link","exportName":"Link","description":"A link is a clickable element that navigates users to another page, section of the page, or resource, and is visually distinguished by styling.","tags":["component","link","anchor","navigation","href"],"route":"components/navigation/link","menu":["Components","Navigation","Link"],"content":"Overview\n\nThe link is flexible to many uses and matching text styles for common\nplacements. Most commonly used in dialog boxes, alerts, and within body copy.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact ARIA\nARIA Pattern\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSize and text styling\n\nLinks should be within text, and should take on that styling when used, and\nprovide the additional link stylings to let the user know that the text","_lower":{"title":"link","description":"a link is a clickable element that navigates users to another page, section of the page, or resource, and is visually distinguished by styling.","tags":"component link anchor navigation href","content":"overview\n\nthe link is flexible to many uses and matching text styles for common\nplacements. most commonly used in dialog boxes, alerts, and within body copy.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize and text styling\n\nlinks should be within text, and should take on that styling when used, and\nprovide the additional link stylings to let the user know that the text","combined":"link a link is a clickable element that navigates users to another page, section of the page, or resource, and is visually distinguished by styling. component link anchor navigation href overview\n\nthe link is flexible to many uses and matching text styles for common\nplacements. most commonly used in dialog boxes, alerts, and within body copy.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize and text styling\n\nlinks should be within text, and should take on that styling when used, and\nprovide the additional link stylings to let the user know that the text","titleNoSpaces":"link","descriptionNoSpaces":"alinkisaclickableelementthatnavigatesuserstoanotherpage,sectionofthepage,orresource,andisvisuallydistinguishedbystyling.","tagsNoSpaces":"componentlinkanchornavigationhref","titleWords":["link"],"descriptionWords":["a","link","is","a","clickable","element","that","navigates","users","to","another","page,","section","of","the","page,","or","resource,","and","is","visually","distinguished","by","styling."],"tagsWords":["component","link","anchor","navigation","href"]}},{"id":"Components-List","title":"List","exportName":"List","description":"The list component organizes related items or data into a vertical, scannable format.","tags":["component","list","collections","ordered","unordered"],"route":"components/typography/list","menu":["Components","Typography","List"],"content":"Overview\n\nThe list component presents structured content which can include details such as\ntext, icons, and actions, in a vertical arrangement. With improved readability\nletting readers quickly scan the content and compare relevant details.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nW3C: Lists\nChakra UI: List\n\nVariables\n\nGet familiar with the features.\n\nBasic options\n\nVertical lists\n\nVertical lists can function differently based on need. Using bullet","_lower":{"title":"list","description":"the list component organizes related items or data into a vertical, scannable format.","tags":"component list collections ordered unordered","content":"overview\n\nthe list component presents structured content which can include details such as\ntext, icons, and actions, in a vertical arrangement. with improved readability\nletting readers quickly scan the content and compare relevant details.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nw3c: lists\nchakra ui: list\n\nvariables\n\nget familiar with the features.\n\nbasic options\n\nvertical lists\n\nvertical lists can function differently based on need. using bullet","combined":"list the list component organizes related items or data into a vertical, scannable format. component list collections ordered unordered overview\n\nthe list component presents structured content which can include details such as\ntext, icons, and actions, in a vertical arrangement. with improved readability\nletting readers quickly scan the content and compare relevant details.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nw3c: lists\nchakra ui: list\n\nvariables\n\nget familiar with the features.\n\nbasic options\n\nvertical lists\n\nvertical lists can function differently based on need. using bullet","titleNoSpaces":"list","descriptionNoSpaces":"thelistcomponentorganizesrelateditemsordataintoavertical,scannableformat.","tagsNoSpaces":"componentlistcollectionsorderedunordered","titleWords":["list"],"descriptionWords":["the","list","component","organizes","related","items","or","data","into","a","vertical,","scannable","format."],"tagsWords":["component","list","collections","ordered","unordered"]}},{"id":"Components-LoadingSpinner","title":"Loading spinner","exportName":"LoadingSpinner","description":"A circular visual indicator that displays the loading status of an ongoing process. It can represent either determinate or indeterminate progress.","tags":["component","loading","spinner","progress"],"route":"components/feedback/loading-spinner","menu":["Components","Feedback","Loading spinner"],"content":"Overview\n\nA loading spinner's primary usage is to visually communicate to the user that a\nprocess is ongoing and that they need to wait. It indicates that the system is\nworking and prevents the user from thinking the application is frozen or\nunresponsive.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisuals\n\nOn white background\n\nMost common, this is the default spinner animation to be used on w","_lower":{"title":"loading spinner","description":"a circular visual indicator that displays the loading status of an ongoing process. it can represent either determinate or indeterminate progress.","tags":"component loading spinner progress","content":"overview\n\na loading spinner's primary usage is to visually communicate to the user that a\nprocess is ongoing and that they need to wait. it indicates that the system is\nworking and prevents the user from thinking the application is frozen or\nunresponsive.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\non white background\n\nmost common, this is the default spinner animation to be used on w","combined":"loading spinner a circular visual indicator that displays the loading status of an ongoing process. it can represent either determinate or indeterminate progress. component loading spinner progress overview\n\na loading spinner's primary usage is to visually communicate to the user that a\nprocess is ongoing and that they need to wait. it indicates that the system is\nworking and prevents the user from thinking the application is frozen or\nunresponsive.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\non white background\n\nmost common, this is the default spinner animation to be used on w","titleNoSpaces":"loadingspinner","descriptionNoSpaces":"acircularvisualindicatorthatdisplaystheloadingstatusofanongoingprocess.itcanrepresenteitherdeterminateorindeterminateprogress.","tagsNoSpaces":"componentloadingspinnerprogress","titleWords":["loading","spinner"],"descriptionWords":["a","circular","visual","indicator","that","displays","the","loading","status","of","an","ongoing","process.","it","can","represent","either","determinate","or","indeterminate","progress."],"tagsWords":["component","loading","spinner","progress"]}},{"id":"Components-LocalizedField","title":"Localized field","exportName":"LocalizedField","description":"A localized field is a single component that enables users to input and manage content for multiple language versions of a piece of data within one unified form area.","tags":["component","form","l10n","i18n","localization"],"route":"components/forms/localized-field","menu":["Components","Forms","Localized field"],"content":"Overview\n\nThe localized field component serves as a container that displays and manages\ncontent across various defined locales. It minimizes clutter by allowing users\nto toggle between language versions using a control while ensuring that the data\nfor each specified locale is correctly captured, validated, and stored in the\napplication.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nSiz","_lower":{"title":"localized field","description":"a localized field is a single component that enables users to input and manage content for multiple language versions of a piece of data within one unified form area.","tags":"component form l10n i18n localization","content":"overview\n\nthe localized field component serves as a container that displays and manages\ncontent across various defined locales. it minimizes clutter by allowing users\nto toggle between language versions using a control while ensuring that the data\nfor each specified locale is correctly captured, validated, and stored in the\napplication.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nsiz","combined":"localized field a localized field is a single component that enables users to input and manage content for multiple language versions of a piece of data within one unified form area. component form l10n i18n localization overview\n\nthe localized field component serves as a container that displays and manages\ncontent across various defined locales. it minimizes clutter by allowing users\nto toggle between language versions using a control while ensuring that the data\nfor each specified locale is correctly captured, validated, and stored in the\napplication.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nsiz","titleNoSpaces":"localizedfield","descriptionNoSpaces":"alocalizedfieldisasinglecomponentthatenablesuserstoinputandmanagecontentformultiplelanguageversionsofapieceofdatawithinoneunifiedformarea.","tagsNoSpaces":"componentforml10ni18nlocalization","titleWords":["localized","field"],"descriptionWords":["a","localized","field","is","a","single","component","that","enables","users","to","input","and","manage","content","for","multiple","language","versions","of","a","piece","of","data","within","one","unified","form","area."],"tagsWords":["component","form","l10n","i18n","localization"]}},{"id":"Components-Menu","title":"Menu","exportName":"Menu","description":"A temporary surface that displays a list of choices or actions. It typically appears when a user interacts with an element like a button or icon, or performs a specific action.","tags":["component","menu","dropdown","actions","context menu"],"route":"components/navigation/menu","menu":["Components","Navigation","Menu"],"content":"Overview\n\nMenus present short, actionable items in a vertical list, ensuring easy\nnavigation and selection. They display below the trigger with a 8px space. To\nclose a menu, a user makes a selection, or in the case several selections may be\nmade, after a confirm button or a click off the active area.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact ARIA\nARIA Pattern\nFigma library","_lower":{"title":"menu","description":"a temporary surface that displays a list of choices or actions. it typically appears when a user interacts with an element like a button or icon, or performs a specific action.","tags":"component menu dropdown actions context menu","content":"overview\n\nmenus present short, actionable items in a vertical list, ensuring easy\nnavigation and selection. they display below the trigger with a 8px space. to\nclose a menu, a user makes a selection, or in the case several selections may be\nmade, after a confirm button or a click off the active area.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library","combined":"menu a temporary surface that displays a list of choices or actions. it typically appears when a user interacts with an element like a button or icon, or performs a specific action. component menu dropdown actions context menu overview\n\nmenus present short, actionable items in a vertical list, ensuring easy\nnavigation and selection. they display below the trigger with a 8px space. to\nclose a menu, a user makes a selection, or in the case several selections may be\nmade, after a confirm button or a click off the active area.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library","titleNoSpaces":"menu","descriptionNoSpaces":"atemporarysurfacethatdisplaysalistofchoicesoractions.ittypicallyappearswhenauserinteractswithanelementlikeabuttonoricon,orperformsaspecificaction.","tagsNoSpaces":"componentmenudropdownactionscontextmenu","titleWords":["menu"],"descriptionWords":["a","temporary","surface","that","displays","a","list","of","choices","or","actions.","it","typically","appears","when","a","user","interacts","with","an","element","like","a","button","or","icon,","or","performs","a","specific","action."],"tagsWords":["component","menu","dropdown","actions","context","menu"]}},{"id":"Components-ModalPage","title":"ModalPage","exportName":"ModalPage","description":"A fullscreen modal overlay for form, info, and tabular page patterns. Provides a structured compound component API for complex editing and detail workflows in Merchant Center.","tags":["component","overlay","modal","page","dialog","fullscreen"],"route":"components/layout/modalpage","menu":["Components","Layout","ModalPage"],"content":"Overview\n\nModalPage is a fullscreen overlay that covers nearly the entire viewport,\nproviding a dedicated context for complex workflows. It is the Nimbus\nequivalent of the Merchant Center Application Kit's modal page patterns\n(form, info, and tabular variants).\n\nUnlike a regular Drawer, ModalPage has a fixed, structured layout with a\ntop navigation bar, header, scrollable content area, and optional footer.\nIt is always controlled — consumers manage the open state with isOpen and\nonClose.\n\nKey fe","_lower":{"title":"modalpage","description":"a fullscreen modal overlay for form, info, and tabular page patterns. provides a structured compound component api for complex editing and detail workflows in merchant center.","tags":"component overlay modal page dialog fullscreen","content":"overview\n\nmodalpage is a fullscreen overlay that covers nearly the entire viewport,\nproviding a dedicated context for complex workflows. it is the nimbus\nequivalent of the merchant center application kit's modal page patterns\n(form, info, and tabular variants).\n\nunlike a regular drawer, modalpage has a fixed, structured layout with a\ntop navigation bar, header, scrollable content area, and optional footer.\nit is always controlled — consumers manage the open state with isopen and\nonclose.\n\nkey fe","combined":"modalpage a fullscreen modal overlay for form, info, and tabular page patterns. provides a structured compound component api for complex editing and detail workflows in merchant center. component overlay modal page dialog fullscreen overview\n\nmodalpage is a fullscreen overlay that covers nearly the entire viewport,\nproviding a dedicated context for complex workflows. it is the nimbus\nequivalent of the merchant center application kit's modal page patterns\n(form, info, and tabular variants).\n\nunlike a regular drawer, modalpage has a fixed, structured layout with a\ntop navigation bar, header, scrollable content area, and optional footer.\nit is always controlled — consumers manage the open state with isopen and\nonclose.\n\nkey fe","titleNoSpaces":"modalpage","descriptionNoSpaces":"afullscreenmodaloverlayforform,info,andtabularpagepatterns.providesastructuredcompoundcomponentapiforcomplexeditinganddetailworkflowsinmerchantcenter.","tagsNoSpaces":"componentoverlaymodalpagedialogfullscreen","titleWords":["modalpage"],"descriptionWords":["a","fullscreen","modal","overlay","for","form,","info,","and","tabular","page","patterns.","provides","a","structured","compound","component","api","for","complex","editing","and","detail","workflows","in","merchant","center."],"tagsWords":["component","overlay","modal","page","dialog","fullscreen"]}},{"id":"Components-MoneyInput","title":"Money input","exportName":"MoneyInput","description":"A controlled input for money values that combines currency selection with amount input, supporting both standard and high-precision monetary values.","tags":["component","input","currency","money"],"route":"components/inputs/money-input","menu":["Components","Inputs","Money input"],"content":"Overview\n\nThe money input component combines a currency selector (a dropdown menu) and a\nnumerical input field into a single, cohesive unit, offering robust states like\ndefault, invalid, and disabled, alongside specialized handling for focused and\nhovered interactions.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact Aria Docs\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nAnatomy\n\nMulti-part functions\n\nIn each localized money input, ther","_lower":{"title":"money input","description":"a controlled input for money values that combines currency selection with amount input, supporting both standard and high-precision monetary values.","tags":"component input currency money","content":"overview\n\nthe money input component combines a currency selector (a dropdown menu) and a\nnumerical input field into a single, cohesive unit, offering robust states like\ndefault, invalid, and disabled, alongside specialized handling for focused and\nhovered interactions.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria docs\nfigma library\n\nvariables\n\nget familiar with the features.\n\nanatomy\n\nmulti-part functions\n\nin each localized money input, ther","combined":"money input a controlled input for money values that combines currency selection with amount input, supporting both standard and high-precision monetary values. component input currency money overview\n\nthe money input component combines a currency selector (a dropdown menu) and a\nnumerical input field into a single, cohesive unit, offering robust states like\ndefault, invalid, and disabled, alongside specialized handling for focused and\nhovered interactions.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria docs\nfigma library\n\nvariables\n\nget familiar with the features.\n\nanatomy\n\nmulti-part functions\n\nin each localized money input, ther","titleNoSpaces":"moneyinput","descriptionNoSpaces":"acontrolledinputformoneyvaluesthatcombinescurrencyselectionwithamountinput,supportingbothstandardandhigh-precisionmonetaryvalues.","tagsNoSpaces":"componentinputcurrencymoney","titleWords":["money","input"],"descriptionWords":["a","controlled","input","for","money","values","that","combines","currency","selection","with","amount","input,","supporting","both","standard","and","high-precision","monetary","values."],"tagsWords":["component","input","currency","money"]}},{"id":"Components-MultilineTextInput","title":"Multiline text input","exportName":"MultilineTextInput","description":"A multi-line text input allows users to enter longer blocks of text across multiple lines. It is suitable for paragraphs, descriptions, or any input requiring more than a single line.","tags":["component","form"],"route":"components/inputs/multiline-text-input","menu":["Components","Inputs","Multiline text input"],"content":"Overview\n\nA multi-line text input allows users to enter multiple lines of text. It expands\nvertically to accommodate more content.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma Library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nThis component supports different sizes, medium (default) and small (for compact\nuses).\n\nSizes\n\n``jsx live\nconst App = () => (\n <Stack direction=\"row\" gap=\"400\" alignItems=\"flex-start\">\n    <MultilineTextI","_lower":{"title":"multiline text input","description":"a multi-line text input allows users to enter longer blocks of text across multiple lines. it is suitable for paragraphs, descriptions, or any input requiring more than a single line.","tags":"component form","content":"overview\n\na multi-line text input allows users to enter multiple lines of text. it expands\nvertically to accommodate more content.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nthis component supports different sizes, medium (default) and small (for compact\nuses).\n\nsizes\n\n``jsx live\nconst app = () => (\n <stack direction=\"row\" gap=\"400\" alignitems=\"flex-start\">\n    <multilinetexti","combined":"multiline text input a multi-line text input allows users to enter longer blocks of text across multiple lines. it is suitable for paragraphs, descriptions, or any input requiring more than a single line. component form overview\n\na multi-line text input allows users to enter multiple lines of text. it expands\nvertically to accommodate more content.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nthis component supports different sizes, medium (default) and small (for compact\nuses).\n\nsizes\n\n``jsx live\nconst app = () => (\n <stack direction=\"row\" gap=\"400\" alignitems=\"flex-start\">\n    <multilinetexti","titleNoSpaces":"multilinetextinput","descriptionNoSpaces":"amulti-linetextinputallowsuserstoenterlongerblocksoftextacrossmultiplelines.itissuitableforparagraphs,descriptions,oranyinputrequiringmorethanasingleline.","tagsNoSpaces":"componentform","titleWords":["multiline","text","input"],"descriptionWords":["a","multi-line","text","input","allows","users","to","enter","longer","blocks","of","text","across","multiple","lines.","it","is","suitable","for","paragraphs,","descriptions,","or","any","input","requiring","more","than","a","single","line."],"tagsWords":["component","form"]}},{"id":"Components-Naivgation","title":"Navigation","description":"Components for moving through an application.","tags":["document"],"route":"components/navigation","menu":["Components","Navigation"],"content":"Navigation\n\nComponents for navigating through an application.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"navigation","description":"components for moving through an application.","tags":"document","content":"navigation\n\ncomponents for navigating through an application.\n\n<categoryoverview variant=\"list\" />","combined":"navigation components for moving through an application. document navigation\n\ncomponents for navigating through an application.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"navigation","descriptionNoSpaces":"componentsformovingthroughanapplication.","tagsNoSpaces":"document","titleWords":["navigation"],"descriptionWords":["components","for","moving","through","an","application."],"tagsWords":["document"]}},{"id":"Components-NimbusI18nProvider","title":"Nimbus i18n provider","exportName":"NimbusI18nProvider","description":"The NimbusI18nProvider component provides internationalization (i18n) context for React Aria components in your Nimbus application. It controls how dates, numbers, and other locale-specific content is formatted across all React Aria-based components.","tags":["component","i18n","internationalization","provider","react-aria"],"route":"components/utilities/nimbus-i18n-provider","menu":["Components","Utilities","Nimbus i18n provider"],"content":"Overview\n\nNimbusI18nProvider is a proxy component that wraps React Aria's I18nProvider,\nmaking it easy to set the locale for all React Aria components like DatePicker,\nCalendar, and NumberInput. This ensures consistent formatting across your\napplication.\n\nKey features\n\n- Locale-aware formatting: Controls date, number, and currency formatting\n  based on locale\n- React Aria integration: Built specifically for React Aria components\n- BCP47 locale codes: Supports standard language-region codes (e.g.","_lower":{"title":"nimbus i18n provider","description":"the nimbusi18nprovider component provides internationalization (i18n) context for react aria components in your nimbus application. it controls how dates, numbers, and other locale-specific content is formatted across all react aria-based components.","tags":"component i18n internationalization provider react-aria","content":"overview\n\nnimbusi18nprovider is a proxy component that wraps react aria's i18nprovider,\nmaking it easy to set the locale for all react aria components like datepicker,\ncalendar, and numberinput. this ensures consistent formatting across your\napplication.\n\nkey features\n\n- locale-aware formatting: controls date, number, and currency formatting\n  based on locale\n- react aria integration: built specifically for react aria components\n- bcp47 locale codes: supports standard language-region codes (e.g.","combined":"nimbus i18n provider the nimbusi18nprovider component provides internationalization (i18n) context for react aria components in your nimbus application. it controls how dates, numbers, and other locale-specific content is formatted across all react aria-based components. component i18n internationalization provider react-aria overview\n\nnimbusi18nprovider is a proxy component that wraps react aria's i18nprovider,\nmaking it easy to set the locale for all react aria components like datepicker,\ncalendar, and numberinput. this ensures consistent formatting across your\napplication.\n\nkey features\n\n- locale-aware formatting: controls date, number, and currency formatting\n  based on locale\n- react aria integration: built specifically for react aria components\n- bcp47 locale codes: supports standard language-region codes (e.g.","titleNoSpaces":"nimbusi18nprovider","descriptionNoSpaces":"thenimbusi18nprovidercomponentprovidesinternationalization(i18n)contextforreactariacomponentsinyournimbusapplication.itcontrolshowdates,numbers,andotherlocale-specificcontentisformattedacrossallreactaria-basedcomponents.","tagsNoSpaces":"componenti18ninternationalizationproviderreact-aria","titleWords":["nimbus","i18n","provider"],"descriptionWords":["the","nimbusi18nprovider","component","provides","internationalization","(i18n)","context","for","react","aria","components","in","your","nimbus","application.","it","controls","how","dates,","numbers,","and","other","locale-specific","content","is","formatted","across","all","react","aria-based","components."],"tagsWords":["component","i18n","internationalization","provider","react-aria"]}},{"id":"Components-NimbusProvider","title":"Nimbus provider","exportName":"NimbusProvider","description":"The NimbusProvider component is a required wrapper that provides theming, internationalization, and routing context for all Nimbus components. It must be placed at the root of your application.","tags":["component","system","provider","setup","theme"],"route":"components/utilities/nimbus-provider","menu":["Components","Utilities","Nimbus provider"],"content":"When to use\n\nRequired setup: Every application using Nimbus components must include NimbusProvider at the root level. Without it, Nimbus components will not function.\n\nBasic usage\n\n``tsx\nimport { NimbusProvider } from \"@commercetools/nimbus\";\n\nfunction App() {\n  return (\n    <NimbusProvider>\n      <YourApp />\n    </NimbusProvider>\n  );\n}\n`\n\nConfiguration options\n\nLocale\n\nSet the locale for all Nimbus components using a BCP47 language tag (e.g., \"en\", \"de-DE\", \"fr-FR\"). NimbusProvider accepts the","_lower":{"title":"nimbus provider","description":"the nimbusprovider component is a required wrapper that provides theming, internationalization, and routing context for all nimbus components. it must be placed at the root of your application.","tags":"component system provider setup theme","content":"when to use\n\nrequired setup: every application using nimbus components must include nimbusprovider at the root level. without it, nimbus components will not function.\n\nbasic usage\n\n``tsx\nimport { nimbusprovider } from \"@commercetools/nimbus\";\n\nfunction app() {\n  return (\n    <nimbusprovider>\n      <yourapp />\n    </nimbusprovider>\n  );\n}\n`\n\nconfiguration options\n\nlocale\n\nset the locale for all nimbus components using a bcp47 language tag (e.g., \"en\", \"de-de\", \"fr-fr\"). nimbusprovider accepts the","combined":"nimbus provider the nimbusprovider component is a required wrapper that provides theming, internationalization, and routing context for all nimbus components. it must be placed at the root of your application. component system provider setup theme when to use\n\nrequired setup: every application using nimbus components must include nimbusprovider at the root level. without it, nimbus components will not function.\n\nbasic usage\n\n``tsx\nimport { nimbusprovider } from \"@commercetools/nimbus\";\n\nfunction app() {\n  return (\n    <nimbusprovider>\n      <yourapp />\n    </nimbusprovider>\n  );\n}\n`\n\nconfiguration options\n\nlocale\n\nset the locale for all nimbus components using a bcp47 language tag (e.g., \"en\", \"de-de\", \"fr-fr\"). nimbusprovider accepts the","titleNoSpaces":"nimbusprovider","descriptionNoSpaces":"thenimbusprovidercomponentisarequiredwrapperthatprovidestheming,internationalization,androutingcontextforallnimbuscomponents.itmustbeplacedattherootofyourapplication.","tagsNoSpaces":"componentsystemprovidersetuptheme","titleWords":["nimbus","provider"],"descriptionWords":["the","nimbusprovider","component","is","a","required","wrapper","that","provides","theming,","internationalization,","and","routing","context","for","all","nimbus","components.","it","must","be","placed","at","the","root","of","your","application."],"tagsWords":["component","system","provider","setup","theme"]}},{"id":"Components-NumberInput","title":"Number input","exportName":"NumberInput","description":"A number input allows users to enter numerical values and adjust them incrementally.","tags":["component","number","input","numeric","stepper"],"route":"components/inputs/number-input","menu":["Components","Inputs","Number input"],"content":"Overview\n\nA number input allows users to enter a numeric value and adjust it using stepper\nbuttons. It provides a quick and precise way to modify values within defined\nparameters, especially for small incremental changes.\n\nKey features\n\n- Value Clamping: If a user types a value outside the defined min or max\n  range, the value will snap to the nearest valid step or the min/max value on\n  blur.\n- Decimals: Supports decimal values and step sizes.\n- Percentages: Can be configured to display values ","_lower":{"title":"number input","description":"a number input allows users to enter numerical values and adjust them incrementally.","tags":"component number input numeric stepper","content":"overview\n\na number input allows users to enter a numeric value and adjust it using stepper\nbuttons. it provides a quick and precise way to modify values within defined\nparameters, especially for small incremental changes.\n\nkey features\n\n- value clamping: if a user types a value outside the defined min or max\n  range, the value will snap to the nearest valid step or the min/max value on\n  blur.\n- decimals: supports decimal values and step sizes.\n- percentages: can be configured to display values ","combined":"number input a number input allows users to enter numerical values and adjust them incrementally. component number input numeric stepper overview\n\na number input allows users to enter a numeric value and adjust it using stepper\nbuttons. it provides a quick and precise way to modify values within defined\nparameters, especially for small incremental changes.\n\nkey features\n\n- value clamping: if a user types a value outside the defined min or max\n  range, the value will snap to the nearest valid step or the min/max value on\n  blur.\n- decimals: supports decimal values and step sizes.\n- percentages: can be configured to display values ","titleNoSpaces":"numberinput","descriptionNoSpaces":"anumberinputallowsuserstoenternumericalvaluesandadjustthemincrementally.","tagsNoSpaces":"componentnumberinputnumericstepper","titleWords":["number","input"],"descriptionWords":["a","number","input","allows","users","to","enter","numerical","values","and","adjust","them","incrementally."],"tagsWords":["component","number","input","numeric","stepper"]}},{"id":"Components-PageContent","title":"PageContent","exportName":"PageContent","description":"A layout component that constrains page content width and arranges content in single or multi-column layouts. It consolidates multiple width-based containers into a single compound component with explicit column control.","tags":["component","layout","page-content","columns","grid"],"route":"components/layout/pagecontent","menu":["Components","Layout","PageContent"],"content":"Overview\n\nPageContent provides a CSS grid-based centering pattern with configurable\nmax-width constraints and column layouts. It supports three width variants\n(wide, narrow, full) and three column configurations (single, equal split, and\n2:1 ratio) with built-in responsive collapse for multi-column layouts.\n\nKey features\n\n- Width constraints: Three variants control the max-width of the content\n  area\n- Column layouts: Single, equal-split (1/1), and sidebar (2/1) column\n  configurations\n- Respons","_lower":{"title":"pagecontent","description":"a layout component that constrains page content width and arranges content in single or multi-column layouts. it consolidates multiple width-based containers into a single compound component with explicit column control.","tags":"component layout page-content columns grid","content":"overview\n\npagecontent provides a css grid-based centering pattern with configurable\nmax-width constraints and column layouts. it supports three width variants\n(wide, narrow, full) and three column configurations (single, equal split, and\n2:1 ratio) with built-in responsive collapse for multi-column layouts.\n\nkey features\n\n- width constraints: three variants control the max-width of the content\n  area\n- column layouts: single, equal-split (1/1), and sidebar (2/1) column\n  configurations\n- respons","combined":"pagecontent a layout component that constrains page content width and arranges content in single or multi-column layouts. it consolidates multiple width-based containers into a single compound component with explicit column control. component layout page-content columns grid overview\n\npagecontent provides a css grid-based centering pattern with configurable\nmax-width constraints and column layouts. it supports three width variants\n(wide, narrow, full) and three column configurations (single, equal split, and\n2:1 ratio) with built-in responsive collapse for multi-column layouts.\n\nkey features\n\n- width constraints: three variants control the max-width of the content\n  area\n- column layouts: single, equal-split (1/1), and sidebar (2/1) column\n  configurations\n- respons","titleNoSpaces":"pagecontent","descriptionNoSpaces":"alayoutcomponentthatconstrainspagecontentwidthandarrangescontentinsingleormulti-columnlayouts.itconsolidatesmultiplewidth-basedcontainersintoasinglecompoundcomponentwithexplicitcolumncontrol.","tagsNoSpaces":"componentlayoutpage-contentcolumnsgrid","titleWords":["pagecontent"],"descriptionWords":["a","layout","component","that","constrains","page","content","width","and","arranges","content","in","single","or","multi-column","layouts.","it","consolidates","multiple","width-based","containers","into","a","single","compound","component","with","explicit","column","control."],"tagsWords":["component","layout","page-content","columns","grid"]}},{"id":"Components-Pagination","title":"Pagination","exportName":"Pagination","description":"Pagination is a component that divides a large set of content or data into sequential pages, providing navigation controls to move between them.","tags":["component","pagination","paging","navigation","pages"],"route":"components/navigation/pagination","menu":["Components","Navigation","Pagination"],"content":"Overview\n\nPagination contains controls for navigating with dedicated buttons for moving to the next and previous pages, visible page numbering for direct access, and clear feedback indicating the user's current page position within the total set of results.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisuals\n\nPage size selection paired with jump to page\n\nUse this combination for the most contr","_lower":{"title":"pagination","description":"pagination is a component that divides a large set of content or data into sequential pages, providing navigation controls to move between them.","tags":"component pagination paging navigation pages","content":"overview\n\npagination contains controls for navigating with dedicated buttons for moving to the next and previous pages, visible page numbering for direct access, and clear feedback indicating the user's current page position within the total set of results.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\npage size selection paired with jump to page\n\nuse this combination for the most contr","combined":"pagination pagination is a component that divides a large set of content or data into sequential pages, providing navigation controls to move between them. component pagination paging navigation pages overview\n\npagination contains controls for navigating with dedicated buttons for moving to the next and previous pages, visible page numbering for direct access, and clear feedback indicating the user's current page position within the total set of results.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\npage size selection paired with jump to page\n\nuse this combination for the most contr","titleNoSpaces":"pagination","descriptionNoSpaces":"paginationisacomponentthatdividesalargesetofcontentordataintosequentialpages,providingnavigationcontrolstomovebetweenthem.","tagsNoSpaces":"componentpaginationpagingnavigationpages","titleWords":["pagination"],"descriptionWords":["pagination","is","a","component","that","divides","a","large","set","of","content","or","data","into","sequential","pages,","providing","navigation","controls","to","move","between","them."],"tagsWords":["component","pagination","paging","navigation","pages"]}},{"id":"Components-PasswordInput","title":"Password input","exportName":"PasswordInput","description":"A password input is a text field that hides entered characters for secure password entry.","tags":["component","forms","password","input","secure"],"route":"components/inputs/password-input","menu":["Components","Inputs","Password input"],"content":"Overview\n\nPassword input guidelines focus on creating secure and user-friendly fields for\nentering sensitive credentials, emphasizing visual obscuring of input, clear\nlabeling and validation, accessibility considerations, and best practices for\npassword visibility toggles and error handling.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nMedium\n\n``jsx live\nconst App = () => <Passw","_lower":{"title":"password input","description":"a password input is a text field that hides entered characters for secure password entry.","tags":"component forms password input secure","content":"overview\n\npassword input guidelines focus on creating secure and user-friendly fields for\nentering sensitive credentials, emphasizing visual obscuring of input, clear\nlabeling and validation, accessibility considerations, and best practices for\npassword visibility toggles and error handling.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\nconst app = () => <passw","combined":"password input a password input is a text field that hides entered characters for secure password entry. component forms password input secure overview\n\npassword input guidelines focus on creating secure and user-friendly fields for\nentering sensitive credentials, emphasizing visual obscuring of input, clear\nlabeling and validation, accessibility considerations, and best practices for\npassword visibility toggles and error handling.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\nconst app = () => <passw","titleNoSpaces":"passwordinput","descriptionNoSpaces":"apasswordinputisatextfieldthathidesenteredcharactersforsecurepasswordentry.","tagsNoSpaces":"componentformspasswordinputsecure","titleWords":["password","input"],"descriptionWords":["a","password","input","is","a","text","field","that","hides","entered","characters","for","secure","password","entry."],"tagsWords":["component","forms","password","input","secure"]}},{"id":"Components-ProgressBar","title":"Progress bar","exportName":"ProgressBar","description":"A linear visual indicator that displays the loading or completion state of an ongoing process. It can represent either determinate or indeterminate progress.","tags":["component","progress","loading"],"route":"components/feedback/progress-bar","menu":["Components","Feedback","Progress bar"],"content":"Overview\n\nA progress bar's primary usage is to visually communicate to the user that a\nprocess is ongoing. If used in combination with a flow or tasks, a progress bar\ncan give a visual indicator of where they currently are in the process and\nestimate how much is left to complete the task.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisuals\n\nOn white background\n\nMost common, progress bar is use","_lower":{"title":"progress bar","description":"a linear visual indicator that displays the loading or completion state of an ongoing process. it can represent either determinate or indeterminate progress.","tags":"component progress loading","content":"overview\n\na progress bar's primary usage is to visually communicate to the user that a\nprocess is ongoing. if used in combination with a flow or tasks, a progress bar\ncan give a visual indicator of where they currently are in the process and\nestimate how much is left to complete the task.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\non white background\n\nmost common, progress bar is use","combined":"progress bar a linear visual indicator that displays the loading or completion state of an ongoing process. it can represent either determinate or indeterminate progress. component progress loading overview\n\na progress bar's primary usage is to visually communicate to the user that a\nprocess is ongoing. if used in combination with a flow or tasks, a progress bar\ncan give a visual indicator of where they currently are in the process and\nestimate how much is left to complete the task.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\non white background\n\nmost common, progress bar is use","titleNoSpaces":"progressbar","descriptionNoSpaces":"alinearvisualindicatorthatdisplaystheloadingorcompletionstateofanongoingprocess.itcanrepresenteitherdeterminateorindeterminateprogress.","tagsNoSpaces":"componentprogressloading","titleWords":["progress","bar"],"descriptionWords":["a","linear","visual","indicator","that","displays","the","loading","or","completion","state","of","an","ongoing","process.","it","can","represent","either","determinate","or","indeterminate","progress."],"tagsWords":["component","progress","loading"]}},{"id":"Components-RadioInput","title":"Radio input","exportName":"RadioInput","description":"A set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.","tags":["component","radio","input","selection","option"],"route":"components/inputs/radio-input","menu":["Components","Inputs","Radio input"],"content":"Overview\n\nRadio inputs ensure users can easily select one option from a small, visible set\nof mutually exclusive choices with clear labels and visual feedback.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nDefault\n\n``jsx live\nconst App = () => (\n  <RadioInput.Root orientation=\"horizontal\" name=\"default-example\">\n    <RadioInput.Option value=\"option1\">Select me</RadioInput.Option>","_lower":{"title":"radio input","description":"a set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.","tags":"component radio input selection option","content":"overview\n\nradio inputs ensure users can easily select one option from a small, visible set\nof mutually exclusive choices with clear labels and visual feedback.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndefault\n\n``jsx live\nconst app = () => (\n  <radioinput.root orientation=\"horizontal\" name=\"default-example\">\n    <radioinput.option value=\"option1\">select me</radioinput.option>","combined":"radio input a set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access. component radio input selection option overview\n\nradio inputs ensure users can easily select one option from a small, visible set\nof mutually exclusive choices with clear labels and visual feedback.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndefault\n\n``jsx live\nconst app = () => (\n  <radioinput.root orientation=\"horizontal\" name=\"default-example\">\n    <radioinput.option value=\"option1\">select me</radioinput.option>","titleNoSpaces":"radioinput","descriptionNoSpaces":"asetofcloselyrelated,mutuallyexclusiveorcomplementaryactionsthatareimportantenoughtobedisplayeddirectlyintheinterfaceforquickaccess.","tagsNoSpaces":"componentradioinputselectionoption","titleWords":["radio","input"],"descriptionWords":["a","set","of","closely","related,","mutually","exclusive","or","complementary","actions","that","are","important","enough","to","be","displayed","directly","in","the","interface","for","quick","access."],"tagsWords":["component","radio","input","selection","option"]}},{"id":"Components-RangeCalendar","title":"Range calendar","exportName":"RangeCalendar","description":"Range calendar displays a grid of days in one or more months and allow users to select a range of dates.","tags":["component","calendar"],"route":"components/inputs/range-calendar","menu":["Components","Inputs","Range calendar"],"content":"Overview\n\nThe calendar component is most often used within the popover component when a\nuser interacts with a date input. Easily toggle, month, year, and select a\nrange.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nDate range\n\nAllow users to select a range of dates.\n\n``jsx live\nconst App = () => <RangeCalendar aria-label=\"Enter dates\" />\n``","_lower":{"title":"range calendar","description":"range calendar displays a grid of days in one or more months and allow users to select a range of dates.","tags":"component calendar","content":"overview\n\nthe calendar component is most often used within the popover component when a\nuser interacts with a date input. easily toggle, month, year, and select a\nrange.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndate range\n\nallow users to select a range of dates.\n\n``jsx live\nconst app = () => <rangecalendar aria-label=\"enter dates\" />\n``","combined":"range calendar range calendar displays a grid of days in one or more months and allow users to select a range of dates. component calendar overview\n\nthe calendar component is most often used within the popover component when a\nuser interacts with a date input. easily toggle, month, year, and select a\nrange.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndate range\n\nallow users to select a range of dates.\n\n``jsx live\nconst app = () => <rangecalendar aria-label=\"enter dates\" />\n``","titleNoSpaces":"rangecalendar","descriptionNoSpaces":"rangecalendardisplaysagridofdaysinoneormoremonthsandallowuserstoselectarangeofdates.","tagsNoSpaces":"componentcalendar","titleWords":["range","calendar"],"descriptionWords":["range","calendar","displays","a","grid","of","days","in","one","or","more","months","and","allow","users","to","select","a","range","of","dates."],"tagsWords":["component","calendar"]}},{"id":"Components-RichTextInput","title":"Rich text input","exportName":"RichTextInput","description":"The rich text input component allows users to input and format text using a user friendly interface. Changing standard text inputs into fully featured edits, supporting formatting, linking, and embedding.","tags":["component","rich-text","editor","formatting"],"route":"components/inputs/rich-text-input","menu":["Components","Inputs","Rich text input"],"content":"Overview\n\nRich text input is made of two parts, the input where users can add text, and a\ntoolbar. This toolbar has been arranged to suit user's needs for text editing.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nSlate.js Documentation\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nToolbar features\n\nUsers can change type styles, toggle bold, italics, underline, strikethrough,\ncode sections, superscript, subscript, bullet points and numbere","_lower":{"title":"rich text input","description":"the rich text input component allows users to input and format text using a user friendly interface. changing standard text inputs into fully featured edits, supporting formatting, linking, and embedding.","tags":"component rich-text editor formatting","content":"overview\n\nrich text input is made of two parts, the input where users can add text, and a\ntoolbar. this toolbar has been arranged to suit user's needs for text editing.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nslate.js documentation\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntoolbar features\n\nusers can change type styles, toggle bold, italics, underline, strikethrough,\ncode sections, superscript, subscript, bullet points and numbere","combined":"rich text input the rich text input component allows users to input and format text using a user friendly interface. changing standard text inputs into fully featured edits, supporting formatting, linking, and embedding. component rich-text editor formatting overview\n\nrich text input is made of two parts, the input where users can add text, and a\ntoolbar. this toolbar has been arranged to suit user's needs for text editing.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nslate.js documentation\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntoolbar features\n\nusers can change type styles, toggle bold, italics, underline, strikethrough,\ncode sections, superscript, subscript, bullet points and numbere","titleNoSpaces":"richtextinput","descriptionNoSpaces":"therichtextinputcomponentallowsuserstoinputandformattextusingauserfriendlyinterface.changingstandardtextinputsintofullyfeaturededits,supportingformatting,linking,andembedding.","tagsNoSpaces":"componentrich-texteditorformatting","titleWords":["rich","text","input"],"descriptionWords":["the","rich","text","input","component","allows","users","to","input","and","format","text","using","a","user","friendly","interface.","changing","standard","text","inputs","into","fully","featured","edits,","supporting","formatting,","linking,","and","embedding."],"tagsWords":["component","rich-text","editor","formatting"]}},{"id":"Components-ScopedSearchInput","title":"Scoped search input","exportName":"ScopedSearchInput","description":"Enables users to define where their search query is applied using a closely paired scope selector.","tags":["component","input","search","select","scoped"],"route":"components/inputs/scoped-search-input","menu":["Components","Inputs","Scoped search input"],"content":"Overview\n\nThe scoped search input combines an input field with a functional scope selector\n(often a dropdown or button group), ensuring users can precisely target their\nquery to a specific data segment, such as searching only 'Products' or only\n'Customers', yielding more accurate and relevant results.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nReact Aria SearchField\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nThere are two sizes,","_lower":{"title":"scoped search input","description":"enables users to define where their search query is applied using a closely paired scope selector.","tags":"component input search select scoped","content":"overview\n\nthe scoped search input combines an input field with a functional scope selector\n(often a dropdown or button group), ensuring users can precisely target their\nquery to a specific data segment, such as searching only 'products' or only\n'customers', yielding more accurate and relevant results.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nreact aria searchfield\n\nvariables\n\nget familiar with the features.\n\nsize\n\nthere are two sizes,","combined":"scoped search input enables users to define where their search query is applied using a closely paired scope selector. component input search select scoped overview\n\nthe scoped search input combines an input field with a functional scope selector\n(often a dropdown or button group), ensuring users can precisely target their\nquery to a specific data segment, such as searching only 'products' or only\n'customers', yielding more accurate and relevant results.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nreact aria searchfield\n\nvariables\n\nget familiar with the features.\n\nsize\n\nthere are two sizes,","titleNoSpaces":"scopedsearchinput","descriptionNoSpaces":"enablesuserstodefinewheretheirsearchqueryisappliedusingacloselypairedscopeselector.","tagsNoSpaces":"componentinputsearchselectscoped","titleWords":["scoped","search","input"],"descriptionWords":["enables","users","to","define","where","their","search","query","is","applied","using","a","closely","paired","scope","selector."],"tagsWords":["component","input","search","select","scoped"]}},{"id":"Components-ScrollArea","title":"ScrollArea","exportName":"ScrollArea","description":"A scrollable container with custom-styled scrollbar overlays. Useful for constrained content areas like panels, sidebars, and dialog bodies.","tags":["component","scroll-area","layout","overflow","scrollbar"],"route":"components/layout/scrollarea","menu":["Components","Layout","ScrollArea"],"content":"Overview\n\nScrollArea constrains content within a fixed region and provides themed\nscrollbar overlays that replace native browser scrollbars. The scrollbar\nappears on hover or during scrolling by default, keeping the interface clean\nuntil the user needs to scroll. The component is keyboard accessible — when\ncontent overflows, the area becomes focusable via Tab and scrollable with\narrow keys.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nStorybook\nChakra ","_lower":{"title":"scrollarea","description":"a scrollable container with custom-styled scrollbar overlays. useful for constrained content areas like panels, sidebars, and dialog bodies.","tags":"component scroll-area layout overflow scrollbar","content":"overview\n\nscrollarea constrains content within a fixed region and provides themed\nscrollbar overlays that replace native browser scrollbars. the scrollbar\nappears on hover or during scrolling by default, keeping the interface clean\nuntil the user needs to scroll. the component is keyboard accessible — when\ncontent overflows, the area becomes focusable via tab and scrollable with\narrow keys.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nstorybook\nchakra ","combined":"scrollarea a scrollable container with custom-styled scrollbar overlays. useful for constrained content areas like panels, sidebars, and dialog bodies. component scroll-area layout overflow scrollbar overview\n\nscrollarea constrains content within a fixed region and provides themed\nscrollbar overlays that replace native browser scrollbars. the scrollbar\nappears on hover or during scrolling by default, keeping the interface clean\nuntil the user needs to scroll. the component is keyboard accessible — when\ncontent overflows, the area becomes focusable via tab and scrollable with\narrow keys.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nstorybook\nchakra ","titleNoSpaces":"scrollarea","descriptionNoSpaces":"ascrollablecontainerwithcustom-styledscrollbaroverlays.usefulforconstrainedcontentareaslikepanels,sidebars,anddialogbodies.","tagsNoSpaces":"componentscroll-arealayoutoverflowscrollbar","titleWords":["scrollarea"],"descriptionWords":["a","scrollable","container","with","custom-styled","scrollbar","overlays.","useful","for","constrained","content","areas","like","panels,","sidebars,","and","dialog","bodies."],"tagsWords":["component","scroll-area","layout","overflow","scrollbar"]}},{"id":"Components-SearchInput","title":"Search input","exportName":"SearchInput","description":"Allows users to discover and filter content by entering text to help users find relevant information efficiently.","tags":["component","search","input"],"route":"components/inputs/search-input","menu":["Components","Inputs","Search input"],"content":"Overview\n\nSearch inputs provide a dedicated text field for users to enter keywords or phrases to query and retrieve matching data or content. They are essential for navigating large amounts of information.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact Aria SearchField\nFigma Library\n\nVariables\n\nGet familiar with the features.\n\nVisual Options\n\nSize\n\nThe medium size of the SearchInput is default, the small size is meant for more compact uses.\n\n``jsx ","_lower":{"title":"search input","description":"allows users to discover and filter content by entering text to help users find relevant information efficiently.","tags":"component search input","content":"overview\n\nsearch inputs provide a dedicated text field for users to enter keywords or phrases to query and retrieve matching data or content. they are essential for navigating large amounts of information.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria searchfield\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nthe medium size of the searchinput is default, the small size is meant for more compact uses.\n\n``jsx ","combined":"search input allows users to discover and filter content by entering text to help users find relevant information efficiently. component search input overview\n\nsearch inputs provide a dedicated text field for users to enter keywords or phrases to query and retrieve matching data or content. they are essential for navigating large amounts of information.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria searchfield\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nthe medium size of the searchinput is default, the small size is meant for more compact uses.\n\n``jsx ","titleNoSpaces":"searchinput","descriptionNoSpaces":"allowsuserstodiscoverandfiltercontentbyenteringtexttohelpusersfindrelevantinformationefficiently.","tagsNoSpaces":"componentsearchinput","titleWords":["search","input"],"descriptionWords":["allows","users","to","discover","and","filter","content","by","entering","text","to","help","users","find","relevant","information","efficiently."],"tagsWords":["component","search","input"]}},{"id":"Components-Select","title":"Select","exportName":"Select","description":"A select input is a form field that presents users with a dropdown menu of options to choose from.","tags":["component","select","dropdown","picker","options"],"route":"components/inputs/select-input","menu":["Components","Inputs","Select input"],"content":"Overview\n\nSelect inputs have two main appearances, two sizes, and several states that will\nrespond to validation status. Currently, this is a single value selector, this\nwill be reworked to bring in multi-select in the future.\n\nResources\n\nARIA APG: Listbox Pattern\nReact ARIA: Select\nFigma Library\n\nVariables\n\nGet familiar with the features.\n\nHeight options\n\nMedium\n\nThis is the default size for the select input.\n\n``jsx live\nconst App = () => (\n  <Select.Root size=\"md\" aria-label=\"Select a fruit\">\n","_lower":{"title":"select","description":"a select input is a form field that presents users with a dropdown menu of options to choose from.","tags":"component select dropdown picker options","content":"overview\n\nselect inputs have two main appearances, two sizes, and several states that will\nrespond to validation status. currently, this is a single value selector, this\nwill be reworked to bring in multi-select in the future.\n\nresources\n\naria apg: listbox pattern\nreact aria: select\nfigma library\n\nvariables\n\nget familiar with the features.\n\nheight options\n\nmedium\n\nthis is the default size for the select input.\n\n``jsx live\nconst app = () => (\n  <select.root size=\"md\" aria-label=\"select a fruit\">\n","combined":"select a select input is a form field that presents users with a dropdown menu of options to choose from. component select dropdown picker options overview\n\nselect inputs have two main appearances, two sizes, and several states that will\nrespond to validation status. currently, this is a single value selector, this\nwill be reworked to bring in multi-select in the future.\n\nresources\n\naria apg: listbox pattern\nreact aria: select\nfigma library\n\nvariables\n\nget familiar with the features.\n\nheight options\n\nmedium\n\nthis is the default size for the select input.\n\n``jsx live\nconst app = () => (\n  <select.root size=\"md\" aria-label=\"select a fruit\">\n","titleNoSpaces":"select","descriptionNoSpaces":"aselectinputisaformfieldthatpresentsuserswithadropdownmenuofoptionstochoosefrom.","tagsNoSpaces":"componentselectdropdownpickeroptions","titleWords":["select"],"descriptionWords":["a","select","input","is","a","form","field","that","presents","users","with","a","dropdown","menu","of","options","to","choose","from."],"tagsWords":["component","select","dropdown","picker","options"]}},{"id":"Components-Separator","title":"Separator","exportName":"Separator","description":"A separator is a visual or semantic line that groups and divides content, establishing rhythm and hierarchy within a layout.","tags":["component","divider","separator","line","section"],"route":"components/layout/separator","menu":["Components","Layout","Separator"],"content":"Overview\n\nSeparators enhance clarity by visually breaking up content. They can be\nhorizontal or vertical.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nLabel options\n\nHorizontal\n\nHorizontal separators can be used to divide content or tools. It can span the\nentire page width or small areas.\n\n``jsx live\nconst App = () => (\n  <Box width=\"1600\">\n    <Separator />\n  </Box>\n)\n`\n\nVertical\n\nVertical sep","_lower":{"title":"separator","description":"a separator is a visual or semantic line that groups and divides content, establishing rhythm and hierarchy within a layout.","tags":"component divider separator line section","content":"overview\n\nseparators enhance clarity by visually breaking up content. they can be\nhorizontal or vertical.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nlabel options\n\nhorizontal\n\nhorizontal separators can be used to divide content or tools. it can span the\nentire page width or small areas.\n\n``jsx live\nconst app = () => (\n  <box width=\"1600\">\n    <separator />\n  </box>\n)\n`\n\nvertical\n\nvertical sep","combined":"separator a separator is a visual or semantic line that groups and divides content, establishing rhythm and hierarchy within a layout. component divider separator line section overview\n\nseparators enhance clarity by visually breaking up content. they can be\nhorizontal or vertical.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nlabel options\n\nhorizontal\n\nhorizontal separators can be used to divide content or tools. it can span the\nentire page width or small areas.\n\n``jsx live\nconst app = () => (\n  <box width=\"1600\">\n    <separator />\n  </box>\n)\n`\n\nvertical\n\nvertical sep","titleNoSpaces":"separator","descriptionNoSpaces":"aseparatorisavisualorsemanticlinethatgroupsanddividescontent,establishingrhythmandhierarchywithinalayout.","tagsNoSpaces":"componentdividerseparatorlinesection","titleWords":["separator"],"descriptionWords":["a","separator","is","a","visual","or","semantic","line","that","groups","and","divides","content,","establishing","rhythm","and","hierarchy","within","a","layout."],"tagsWords":["component","divider","separator","line","section"]}},{"id":"Components-SimpleGrid","title":"Simple grid","exportName":"SimpleGrid","description":"SimpleGrid offers an intuitive way to easily create responsive grid layouts.","tags":["component","grid","simple","layout","columns"],"route":"components/layout/simple-grid","menu":["Components","Layout","Simple grid"],"content":"Basic usage\n\nUse SimpleGrid → When you need a quick, responsive, equal-sized grid (e.g.,\nproduct listings, image galleries).\n\n``jsx\nimport { SimpleGrid } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst App = () => (\n  <SimpleGrid gap=\"100\">\n    <Box key=\"1\" p=\"400\" bg=\"neutral.7\">\n      Item 1\n    </Box>\n    <Box key=\"2\" p=\"400\" bg=\"neutral.7\">\n      Item 2\n    </Box>\n  </SimpleGrid>\n)\n`\n\nWith columns\n\nUse the columns prop to define the number of columns in the grid layout.\n\n`jsx live\nconst App","_lower":{"title":"simple grid","description":"simplegrid offers an intuitive way to easily create responsive grid layouts.","tags":"component grid simple layout columns","content":"basic usage\n\nuse simplegrid → when you need a quick, responsive, equal-sized grid (e.g.,\nproduct listings, image galleries).\n\n``jsx\nimport { simplegrid } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst app = () => (\n  <simplegrid gap=\"100\">\n    <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n      item 1\n    </box>\n    <box key=\"2\" p=\"400\" bg=\"neutral.7\">\n      item 2\n    </box>\n  </simplegrid>\n)\n`\n\nwith columns\n\nuse the columns prop to define the number of columns in the grid layout.\n\n`jsx live\nconst app","combined":"simple grid simplegrid offers an intuitive way to easily create responsive grid layouts. component grid simple layout columns basic usage\n\nuse simplegrid → when you need a quick, responsive, equal-sized grid (e.g.,\nproduct listings, image galleries).\n\n``jsx\nimport { simplegrid } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst app = () => (\n  <simplegrid gap=\"100\">\n    <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n      item 1\n    </box>\n    <box key=\"2\" p=\"400\" bg=\"neutral.7\">\n      item 2\n    </box>\n  </simplegrid>\n)\n`\n\nwith columns\n\nuse the columns prop to define the number of columns in the grid layout.\n\n`jsx live\nconst app","titleNoSpaces":"simplegrid","descriptionNoSpaces":"simplegridoffersanintuitivewaytoeasilycreateresponsivegridlayouts.","tagsNoSpaces":"componentgridsimplelayoutcolumns","titleWords":["simple","grid"],"descriptionWords":["simplegrid","offers","an","intuitive","way","to","easily","create","responsive","grid","layouts."],"tagsWords":["component","grid","simple","layout","columns"]}},{"id":"Components-Spacer","title":"Spacer","exportName":"Spacer","description":"A simple layout component that automatically fills available space in flex layouts using flexGrow 1.","tags":["component","layout","flex"],"route":"components/layout/spacer","menu":["Components","Layout","Spacer"],"content":"Overview\n\nSpacer is a utility component designed to create flexible spacing between\nelements in flex layouts. It automatically expands to fill any remaining space,\nmaking it perfect for creating navigation bars, toolbars, and other layouts\nwhere you need to push elements apart.\n\nKey features\n\n- Automatic Space Filling: Uses flexGrow: 1 to occupy all available space\n- Works in Any Direction: Supports both horizontal and vertical flex layouts\n- Flexible Styling: Can accept any Chakra UI Box props ","_lower":{"title":"spacer","description":"a simple layout component that automatically fills available space in flex layouts using flexgrow 1.","tags":"component layout flex","content":"overview\n\nspacer is a utility component designed to create flexible spacing between\nelements in flex layouts. it automatically expands to fill any remaining space,\nmaking it perfect for creating navigation bars, toolbars, and other layouts\nwhere you need to push elements apart.\n\nkey features\n\n- automatic space filling: uses flexgrow: 1 to occupy all available space\n- works in any direction: supports both horizontal and vertical flex layouts\n- flexible styling: can accept any chakra ui box props ","combined":"spacer a simple layout component that automatically fills available space in flex layouts using flexgrow 1. component layout flex overview\n\nspacer is a utility component designed to create flexible spacing between\nelements in flex layouts. it automatically expands to fill any remaining space,\nmaking it perfect for creating navigation bars, toolbars, and other layouts\nwhere you need to push elements apart.\n\nkey features\n\n- automatic space filling: uses flexgrow: 1 to occupy all available space\n- works in any direction: supports both horizontal and vertical flex layouts\n- flexible styling: can accept any chakra ui box props ","titleNoSpaces":"spacer","descriptionNoSpaces":"asimplelayoutcomponentthatautomaticallyfillsavailablespaceinflexlayoutsusingflexgrow1.","tagsNoSpaces":"componentlayoutflex","titleWords":["spacer"],"descriptionWords":["a","simple","layout","component","that","automatically","fills","available","space","in","flex","layouts","using","flexgrow","1."],"tagsWords":["component","layout","flex"]}},{"id":"Components-SplitButton","title":"Split button","exportName":"SplitButton","description":"A split button merges a main action with a dropdown for related, less common actions.","tags":["component","buttons","actions","controls"],"route":"components/buttons/split-button","menu":["Components","Buttons","Split button"],"content":"Overview\n\nA split button merges a main action that is immediate with a secondary dropdown\nmenu that holds related actions that are used less often. This component\nprovides quick access to essential functions while offering a complete list of\noptions, all while saving space.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisuals\n\nSolid\n\nMost common styling of the split button. Try to keep only one","_lower":{"title":"split button","description":"a split button merges a main action with a dropdown for related, less common actions.","tags":"component buttons actions controls","content":"overview\n\na split button merges a main action that is immediate with a secondary dropdown\nmenu that holds related actions that are used less often. this component\nprovides quick access to essential functions while offering a complete list of\noptions, all while saving space.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\nsolid\n\nmost common styling of the split button. try to keep only one","combined":"split button a split button merges a main action with a dropdown for related, less common actions. component buttons actions controls overview\n\na split button merges a main action that is immediate with a secondary dropdown\nmenu that holds related actions that are used less often. this component\nprovides quick access to essential functions while offering a complete list of\noptions, all while saving space.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\nsolid\n\nmost common styling of the split button. try to keep only one","titleNoSpaces":"splitbutton","descriptionNoSpaces":"asplitbuttonmergesamainactionwithadropdownforrelated,lesscommonactions.","tagsNoSpaces":"componentbuttonsactionscontrols","titleWords":["split","button"],"descriptionWords":["a","split","button","merges","a","main","action","with","a","dropdown","for","related,","less","common","actions."],"tagsWords":["component","buttons","actions","controls"]}},{"id":"Components-Stack","title":"Stack","exportName":"Stack","description":"An easily customizable Stack component, re-exported from Chakra UI stack component, that provides a consistent and responsive layout structure across different products. Stacks allow you to effortlessly build flexible layouts with automatic distribution. You can arrange elements horizontally or vertically, adding spacing and/or separators between each item.","tags":["component","stack","layout","vertical","horizontal"],"route":"components/layout/stack","menu":["Components","Layout","Stack"],"content":"Basic usage\n\n``jsx\nimport { Stack } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst App = () => (\n  <Stack>\n    {\" \"}\n    <Box key=\"1\" p=\"400\" bg=\"primary.7\">\n      Item 1\n    </Box>\n    <Box key=\"1\" p=\"400\" bg=\"primary.7\">\n      Item 2\n    </Box>\n  </Stack>\n);\n`\n\nWith direction\n\nUse the direction prop to change the layout direction. The default direction is\n\"column\" (vertical). Set it to \"row\" for horizontal stacking.\n\n`jsx live\nconst App = () => (\n  <Stack direction=\"row\">\n    <Box key=\"1\" p=","_lower":{"title":"stack","description":"an easily customizable stack component, re-exported from chakra ui stack component, that provides a consistent and responsive layout structure across different products. stacks allow you to effortlessly build flexible layouts with automatic distribution. you can arrange elements horizontally or vertically, adding spacing and/or separators between each item.","tags":"component stack layout vertical horizontal","content":"basic usage\n\n``jsx\nimport { stack } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst app = () => (\n  <stack>\n    {\" \"}\n    <box key=\"1\" p=\"400\" bg=\"primary.7\">\n      item 1\n    </box>\n    <box key=\"1\" p=\"400\" bg=\"primary.7\">\n      item 2\n    </box>\n  </stack>\n);\n`\n\nwith direction\n\nuse the direction prop to change the layout direction. the default direction is\n\"column\" (vertical). set it to \"row\" for horizontal stacking.\n\n`jsx live\nconst app = () => (\n  <stack direction=\"row\">\n    <box key=\"1\" p=","combined":"stack an easily customizable stack component, re-exported from chakra ui stack component, that provides a consistent and responsive layout structure across different products. stacks allow you to effortlessly build flexible layouts with automatic distribution. you can arrange elements horizontally or vertically, adding spacing and/or separators between each item. component stack layout vertical horizontal basic usage\n\n``jsx\nimport { stack } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst app = () => (\n  <stack>\n    {\" \"}\n    <box key=\"1\" p=\"400\" bg=\"primary.7\">\n      item 1\n    </box>\n    <box key=\"1\" p=\"400\" bg=\"primary.7\">\n      item 2\n    </box>\n  </stack>\n);\n`\n\nwith direction\n\nuse the direction prop to change the layout direction. the default direction is\n\"column\" (vertical). set it to \"row\" for horizontal stacking.\n\n`jsx live\nconst app = () => (\n  <stack direction=\"row\">\n    <box key=\"1\" p=","titleNoSpaces":"stack","descriptionNoSpaces":"aneasilycustomizablestackcomponent,re-exportedfromchakrauistackcomponent,thatprovidesaconsistentandresponsivelayoutstructureacrossdifferentproducts.stacksallowyoutoeffortlesslybuildflexiblelayoutswithautomaticdistribution.youcanarrangeelementshorizontallyorvertically,addingspacingand/orseparatorsbetweeneachitem.","tagsNoSpaces":"componentstacklayoutverticalhorizontal","titleWords":["stack"],"descriptionWords":["an","easily","customizable","stack","component,","re-exported","from","chakra","ui","stack","component,","that","provides","a","consistent","and","responsive","layout","structure","across","different","products.","stacks","allow","you","to","effortlessly","build","flexible","layouts","with","automatic","distribution.","you","can","arrange","elements","horizontally","or","vertically,","adding","spacing","and/or","separators","between","each","item."],"tagsWords":["component","stack","layout","vertical","horizontal"]}},{"id":"Components-Steps","title":"Steps","exportName":"Steps","description":"A progress indicator with built-in navigation that visually communicates the user's position within a multi-step process such as forms, wizards, and onboarding flows.","tags":["component","stepper","progress","wizard","navigation"],"route":"components/navigation/steps","menu":["Components","Navigation","Steps"],"content":"Overview\n\nThe Steps component helps users understand where they are in a multi-step\nprocess. It provides clear visual feedback about completed, current, and\nupcoming steps, making complex workflows feel more manageable and predictable.\n\nKey Features\n\n- Three size variants: Extra small (xs), small (sm), and medium (md) to fit\n  different interface densities\n- Two orientations: Horizontal for wide layouts and vertical for sidebar or\n  narrow contexts\n- Flexible indicators: Numeric step numbers wit","_lower":{"title":"steps","description":"a progress indicator with built-in navigation that visually communicates the user's position within a multi-step process such as forms, wizards, and onboarding flows.","tags":"component stepper progress wizard navigation","content":"overview\n\nthe steps component helps users understand where they are in a multi-step\nprocess. it provides clear visual feedback about completed, current, and\nupcoming steps, making complex workflows feel more manageable and predictable.\n\nkey features\n\n- three size variants: extra small (xs), small (sm), and medium (md) to fit\n  different interface densities\n- two orientations: horizontal for wide layouts and vertical for sidebar or\n  narrow contexts\n- flexible indicators: numeric step numbers wit","combined":"steps a progress indicator with built-in navigation that visually communicates the user's position within a multi-step process such as forms, wizards, and onboarding flows. component stepper progress wizard navigation overview\n\nthe steps component helps users understand where they are in a multi-step\nprocess. it provides clear visual feedback about completed, current, and\nupcoming steps, making complex workflows feel more manageable and predictable.\n\nkey features\n\n- three size variants: extra small (xs), small (sm), and medium (md) to fit\n  different interface densities\n- two orientations: horizontal for wide layouts and vertical for sidebar or\n  narrow contexts\n- flexible indicators: numeric step numbers wit","titleNoSpaces":"steps","descriptionNoSpaces":"aprogressindicatorwithbuilt-innavigationthatvisuallycommunicatestheuser'spositionwithinamulti-stepprocesssuchasforms,wizards,andonboardingflows.","tagsNoSpaces":"componentstepperprogresswizardnavigation","titleWords":["steps"],"descriptionWords":["a","progress","indicator","with","built-in","navigation","that","visually","communicates","the","user's","position","within","a","multi-step","process","such","as","forms,","wizards,","and","onboarding","flows."],"tagsWords":["component","stepper","progress","wizard","navigation"]}},{"id":"Components-Switch","title":"Switch","exportName":"Switch","description":"A clear, visual toggle, allowing users to activate or deactivate a setting quickly.","tags":["component","input","toggle"],"route":"components/inputs/switch","menu":["Components","Inputs","Switch"],"content":"Overview\n\nThis switch is an interactive element that provides instant visual feedback\nallowing users to toggle binary options.\n\nResources\n\n- Figma\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nMedium (md)\n\n``jsx live\nconst App = () => <Switch size=\"md\">Label</Switch>;\n`\n\nSmall (sm)\n\n`jsx live\nconst App = () => <Switch size=\"sm\">Label</Switch>;\n`\n\nLabels\n\nWith label\n\nIt is always good practice to have a label paired with a switch so a user knows\nwhat is being toggled. The label responds to b","_lower":{"title":"switch","description":"a clear, visual toggle, allowing users to activate or deactivate a setting quickly.","tags":"component input toggle","content":"overview\n\nthis switch is an interactive element that provides instant visual feedback\nallowing users to toggle binary options.\n\nresources\n\n- figma\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium (md)\n\n``jsx live\nconst app = () => <switch size=\"md\">label</switch>;\n`\n\nsmall (sm)\n\n`jsx live\nconst app = () => <switch size=\"sm\">label</switch>;\n`\n\nlabels\n\nwith label\n\nit is always good practice to have a label paired with a switch so a user knows\nwhat is being toggled. the label responds to b","combined":"switch a clear, visual toggle, allowing users to activate or deactivate a setting quickly. component input toggle overview\n\nthis switch is an interactive element that provides instant visual feedback\nallowing users to toggle binary options.\n\nresources\n\n- figma\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium (md)\n\n``jsx live\nconst app = () => <switch size=\"md\">label</switch>;\n`\n\nsmall (sm)\n\n`jsx live\nconst app = () => <switch size=\"sm\">label</switch>;\n`\n\nlabels\n\nwith label\n\nit is always good practice to have a label paired with a switch so a user knows\nwhat is being toggled. the label responds to b","titleNoSpaces":"switch","descriptionNoSpaces":"aclear,visualtoggle,allowinguserstoactivateordeactivateasettingquickly.","tagsNoSpaces":"componentinputtoggle","titleWords":["switch"],"descriptionWords":["a","clear,","visual","toggle,","allowing","users","to","activate","or","deactivate","a","setting","quickly."],"tagsWords":["component","input","toggle"]}},{"id":"Components-Table","title":"Table","exportName":"Table","description":"The Table component provides a straightforward way to display static, read-only data in a tabular format. It uses semantic HTML table elements and is designed for simple data presentation without interactive features like sorting, filtering, or selection.","tags":["component","table","tabular data","static","read-only"],"route":"components/data-display/table","menu":["Components","Data Display","Table"],"content":"Related components\n\n- DataTable Component - Upgrade to DataTable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\nThe DataTable component is built for complex, interactive data management. If you only need to display static content, Table is the simpler, lighter choice.","_lower":{"title":"table","description":"the table component provides a straightforward way to display static, read-only data in a tabular format. it uses semantic html table elements and is designed for simple data presentation without interactive features like sorting, filtering, or selection.","tags":"component table tabular data static read-only","content":"related components\n\n- datatable component - upgrade to datatable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\nthe datatable component is built for complex, interactive data management. if you only need to display static content, table is the simpler, lighter choice.","combined":"table the table component provides a straightforward way to display static, read-only data in a tabular format. it uses semantic html table elements and is designed for simple data presentation without interactive features like sorting, filtering, or selection. component table tabular data static read-only related components\n\n- datatable component - upgrade to datatable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\nthe datatable component is built for complex, interactive data management. if you only need to display static content, table is the simpler, lighter choice.","titleNoSpaces":"table","descriptionNoSpaces":"thetablecomponentprovidesastraightforwardwaytodisplaystatic,read-onlydatainatabularformat.itusessemantichtmltableelementsandisdesignedforsimpledatapresentationwithoutinteractivefeatureslikesorting,filtering,orselection.","tagsNoSpaces":"componenttabletabulardatastaticread-only","titleWords":["table"],"descriptionWords":["the","table","component","provides","a","straightforward","way","to","display","static,","read-only","data","in","a","tabular","format.","it","uses","semantic","html","table","elements","and","is","designed","for","simple","data","presentation","without","interactive","features","like","sorting,","filtering,","or","selection."],"tagsWords":["component","table","tabular","data","static","read-only"]}},{"id":"Components-TabNav","title":"TabNav","exportName":"TabNav","description":"Tab-styled navigation links for route-based page navigation.","tags":["component","navigation","tab-nav"],"route":"components/navigation/tabnav","menu":["Components","Navigation","TabNav"],"content":"Overview\n\nTabNav provides tab-styled navigation links for route-based page navigation.\nUnlike Tabs, which switch content panels within the same page, TabNav renders\na <nav> landmark containing <a> anchor elements that link to distinct routes.\nEach item behaves as a standard link, and the active item is identified with\naria-current=\"page\".\n\nUse TabNav in page headers where each item links to a different URL (e.g.,\n/orders/123/general, /orders/123/items).\n\nResources\n\nDeep dive into implementation ","_lower":{"title":"tabnav","description":"tab-styled navigation links for route-based page navigation.","tags":"component navigation tab-nav","content":"overview\n\ntabnav provides tab-styled navigation links for route-based page navigation.\nunlike tabs, which switch content panels within the same page, tabnav renders\na <nav> landmark containing <a> anchor elements that link to distinct routes.\neach item behaves as a standard link, and the active item is identified with\naria-current=\"page\".\n\nuse tabnav in page headers where each item links to a different url (e.g.,\n/orders/123/general, /orders/123/items).\n\nresources\n\ndeep dive into implementation ","combined":"tabnav tab-styled navigation links for route-based page navigation. component navigation tab-nav overview\n\ntabnav provides tab-styled navigation links for route-based page navigation.\nunlike tabs, which switch content panels within the same page, tabnav renders\na <nav> landmark containing <a> anchor elements that link to distinct routes.\neach item behaves as a standard link, and the active item is identified with\naria-current=\"page\".\n\nuse tabnav in page headers where each item links to a different url (e.g.,\n/orders/123/general, /orders/123/items).\n\nresources\n\ndeep dive into implementation ","titleNoSpaces":"tabnav","descriptionNoSpaces":"tab-stylednavigationlinksforroute-basedpagenavigation.","tagsNoSpaces":"componentnavigationtab-nav","titleWords":["tabnav"],"descriptionWords":["tab-styled","navigation","links","for","route-based","page","navigation."],"tagsWords":["component","navigation","tab-nav"]}},{"id":"Components-Tabs","title":"Tabs","exportName":"Tabs","description":"Organizes content into distinct sections, enabling users to switch views within a single container.","tags":["component","navigation","tabs"],"route":"components/navigation/tabs","menu":["Components","Navigation","Tabs"],"content":"Overview\n\nTabs are a navigational component used to organize and switch between different\nsections of content within the same contextual view, allowing users to access\nmultiple related pages or views without navigating away from the main screen.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nReact Aria Docs\n\nTabs vs TabNav\n\nTabs and TabNav look identical but serve fundamentally different purposes.\n\n| | Tabs | TabNav |\n|---|---|---|\n| Use ca","_lower":{"title":"tabs","description":"organizes content into distinct sections, enabling users to switch views within a single container.","tags":"component navigation tabs","content":"overview\n\ntabs are a navigational component used to organize and switch between different\nsections of content within the same contextual view, allowing users to access\nmultiple related pages or views without navigating away from the main screen.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nreact aria docs\n\ntabs vs tabnav\n\ntabs and tabnav look identical but serve fundamentally different purposes.\n\n| | tabs | tabnav |\n|---|---|---|\n| use ca","combined":"tabs organizes content into distinct sections, enabling users to switch views within a single container. component navigation tabs overview\n\ntabs are a navigational component used to organize and switch between different\nsections of content within the same contextual view, allowing users to access\nmultiple related pages or views without navigating away from the main screen.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nreact aria docs\n\ntabs vs tabnav\n\ntabs and tabnav look identical but serve fundamentally different purposes.\n\n| | tabs | tabnav |\n|---|---|---|\n| use ca","titleNoSpaces":"tabs","descriptionNoSpaces":"organizescontentintodistinctsections,enablinguserstoswitchviewswithinasinglecontainer.","tagsNoSpaces":"componentnavigationtabs","titleWords":["tabs"],"descriptionWords":["organizes","content","into","distinct","sections,","enabling","users","to","switch","views","within","a","single","container."],"tagsWords":["component","navigation","tabs"]}},{"id":"Components-TagGroup","title":"Tag group","exportName":"TagGroup","description":"A tag group is a compact, interactive element. It categorizes, labels, or adds attributes to objects for quick recognition and filtering.","tags":["component","tag","chip","label","removable"],"route":"components/data-display/tag-group","menu":["Components","Data Display","Tag group"],"content":"Overview\n\nThe tag group organizes a collection of individual tag components, allowing\nusers to efficiently scan and understand multiple pieces of metadata or filter\ncriteria associated with a product, order, or entity in a compact, manageable\nspace.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nSize\n\nThe large size of the tag within tag groups is the default, the small ","_lower":{"title":"tag group","description":"a tag group is a compact, interactive element. it categorizes, labels, or adds attributes to objects for quick recognition and filtering.","tags":"component tag chip label removable","content":"overview\n\nthe tag group organizes a collection of individual tag components, allowing\nusers to efficiently scan and understand multiple pieces of metadata or filter\ncriteria associated with a product, order, or entity in a compact, manageable\nspace.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nthe large size of the tag within tag groups is the default, the small ","combined":"tag group a tag group is a compact, interactive element. it categorizes, labels, or adds attributes to objects for quick recognition and filtering. component tag chip label removable overview\n\nthe tag group organizes a collection of individual tag components, allowing\nusers to efficiently scan and understand multiple pieces of metadata or filter\ncriteria associated with a product, order, or entity in a compact, manageable\nspace.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nthe large size of the tag within tag groups is the default, the small ","titleNoSpaces":"taggroup","descriptionNoSpaces":"ataggroupisacompact,interactiveelement.itcategorizes,labels,oraddsattributestoobjectsforquickrecognitionandfiltering.","tagsNoSpaces":"componenttagchiplabelremovable","titleWords":["tag","group"],"descriptionWords":["a","tag","group","is","a","compact,","interactive","element.","it","categorizes,","labels,","or","adds","attributes","to","objects","for","quick","recognition","and","filtering."],"tagsWords":["component","tag","chip","label","removable"]}},{"id":"Components-Text","title":"Text","exportName":"Text","description":"Text styles are predefined collections of typography rules (including font-size, font-weight, line-height, and letter-spacing) that create reusable, consistent styles.","tags":["component","typography","text"],"route":"components/typography/text","menu":["Components","Typography","Text"],"content":"Overview\n\nReadable and consistent text styling is important to creating effective user\nfriendly and efficient products. These styles and tools will help give the\nbuilding blocks and provide more options for creation, and there are still ways\nto allow for customization for the rare cases it is needed.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nTypography scale and hierarchy\n\nText styles here a","_lower":{"title":"text","description":"text styles are predefined collections of typography rules (including font-size, font-weight, line-height, and letter-spacing) that create reusable, consistent styles.","tags":"component typography text","content":"overview\n\nreadable and consistent text styling is important to creating effective user\nfriendly and efficient products. these styles and tools will help give the\nbuilding blocks and provide more options for creation, and there are still ways\nto allow for customization for the rare cases it is needed.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntypography scale and hierarchy\n\ntext styles here a","combined":"text text styles are predefined collections of typography rules (including font-size, font-weight, line-height, and letter-spacing) that create reusable, consistent styles. component typography text overview\n\nreadable and consistent text styling is important to creating effective user\nfriendly and efficient products. these styles and tools will help give the\nbuilding blocks and provide more options for creation, and there are still ways\nto allow for customization for the rare cases it is needed.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntypography scale and hierarchy\n\ntext styles here a","titleNoSpaces":"text","descriptionNoSpaces":"textstylesarepredefinedcollectionsoftypographyrules(includingfont-size,font-weight,line-height,andletter-spacing)thatcreatereusable,consistentstyles.","tagsNoSpaces":"componenttypographytext","titleWords":["text"],"descriptionWords":["text","styles","are","predefined","collections","of","typography","rules","(including","font-size,","font-weight,","line-height,","and","letter-spacing)","that","create","reusable,","consistent","styles."],"tagsWords":["component","typography","text"]}},{"id":"Components-TextInput","title":"Text input","exportName":"TextInput","description":"Allows users to enter information like names, addresses, emails, passwords, search queries, or any other text-based data.","tags":["component","text","input","field","string"],"route":"components/inputs/text-input","menu":["Components","Inputs","Text input"],"content":"Overview\n\nUsers can type, delete, copy, and paste text within the box. Sometimes, there\ncan be additional features like autocomplete or validation to help users enter\ninformation correctly.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nPlaceholder\n\nThis is the styling for placeholder text. It is a shade lighter than active\ntext.\n\n``jsx live\nconst App = () => <TextInput placeholder=\"input value\"/","_lower":{"title":"text input","description":"allows users to enter information like names, addresses, emails, passwords, search queries, or any other text-based data.","tags":"component text input field string","content":"overview\n\nusers can type, delete, copy, and paste text within the box. sometimes, there\ncan be additional features like autocomplete or validation to help users enter\ninformation correctly.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nplaceholder\n\nthis is the styling for placeholder text. it is a shade lighter than active\ntext.\n\n``jsx live\nconst app = () => <textinput placeholder=\"input value\"/","combined":"text input allows users to enter information like names, addresses, emails, passwords, search queries, or any other text-based data. component text input field string overview\n\nusers can type, delete, copy, and paste text within the box. sometimes, there\ncan be additional features like autocomplete or validation to help users enter\ninformation correctly.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nplaceholder\n\nthis is the styling for placeholder text. it is a shade lighter than active\ntext.\n\n``jsx live\nconst app = () => <textinput placeholder=\"input value\"/","titleNoSpaces":"textinput","descriptionNoSpaces":"allowsuserstoenterinformationlikenames,addresses,emails,passwords,searchqueries,oranyothertext-baseddata.","tagsNoSpaces":"componenttextinputfieldstring","titleWords":["text","input"],"descriptionWords":["allows","users","to","enter","information","like","names,","addresses,","emails,","passwords,","search","queries,","or","any","other","text-based","data."],"tagsWords":["component","text","input","field","string"]}},{"id":"Components-TimeInput","title":"Time input","exportName":"TimeInput","description":"A time input allows users to enter and select a specific time. It supports flexible input methods while ensuring accuracy and ease of use.","tags":["component","time","date"],"route":"components/inputs/time-input","menu":["Components","Inputs","Time input"],"content":"Overview\n\nA time input enables users to enter and select a specific time. It offers\nflexible input methods while maintaining accuracy and usability.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact ARIA\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nSize\n\nMedium size is the default sizing used most commonly, with a small size for\ncompact use cases.\n\n``jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" ga","_lower":{"title":"time input","description":"a time input allows users to enter and select a specific time. it supports flexible input methods while ensuring accuracy and ease of use.","tags":"component time date","content":"overview\n\na time input enables users to enter and select a specific time. it offers\nflexible input methods while maintaining accuracy and usability.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nmedium size is the default sizing used most commonly, with a small size for\ncompact use cases.\n\n``jsx live\nconst app = () => (\n  <grid templatecolumns=\"repeat(2, 1fr)\" ga","combined":"time input a time input allows users to enter and select a specific time. it supports flexible input methods while ensuring accuracy and ease of use. component time date overview\n\na time input enables users to enter and select a specific time. it offers\nflexible input methods while maintaining accuracy and usability.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nmedium size is the default sizing used most commonly, with a small size for\ncompact use cases.\n\n``jsx live\nconst app = () => (\n  <grid templatecolumns=\"repeat(2, 1fr)\" ga","titleNoSpaces":"timeinput","descriptionNoSpaces":"atimeinputallowsuserstoenterandselectaspecifictime.itsupportsflexibleinputmethodswhileensuringaccuracyandeaseofuse.","tagsNoSpaces":"componenttimedate","titleWords":["time","input"],"descriptionWords":["a","time","input","allows","users","to","enter","and","select","a","specific","time.","it","supports","flexible","input","methods","while","ensuring","accuracy","and","ease","of","use."],"tagsWords":["component","time","date"]}},{"id":"Components-Toast","title":"Toast","exportName":"toast","description":"Displays brief, temporary notifications that confirm actions or provide status updates without interrupting the user's workflow.","tags":["component","notification","feedback","transient"],"route":"components/feedback/toast","menu":["Components","Feedback","Toast"],"content":"Overview\n\nToasts are lightweight, non-modal notifications that appear temporarily at the edge of the screen. They provide contextual feedback about completed actions, system status, or important updates while allowing users to continue their work uninterrupted. Unlike alerts or dialogs, toasts automatically dismiss after a few seconds and don't require user interaction unless an action is provided.\n\nKey characteristics\n\n- Non-intrusive: Appears without blocking content or requiring immediate att","_lower":{"title":"toast","description":"displays brief, temporary notifications that confirm actions or provide status updates without interrupting the user's workflow.","tags":"component notification feedback transient","content":"overview\n\ntoasts are lightweight, non-modal notifications that appear temporarily at the edge of the screen. they provide contextual feedback about completed actions, system status, or important updates while allowing users to continue their work uninterrupted. unlike alerts or dialogs, toasts automatically dismiss after a few seconds and don't require user interaction unless an action is provided.\n\nkey characteristics\n\n- non-intrusive: appears without blocking content or requiring immediate att","combined":"toast displays brief, temporary notifications that confirm actions or provide status updates without interrupting the user's workflow. component notification feedback transient overview\n\ntoasts are lightweight, non-modal notifications that appear temporarily at the edge of the screen. they provide contextual feedback about completed actions, system status, or important updates while allowing users to continue their work uninterrupted. unlike alerts or dialogs, toasts automatically dismiss after a few seconds and don't require user interaction unless an action is provided.\n\nkey characteristics\n\n- non-intrusive: appears without blocking content or requiring immediate att","titleNoSpaces":"toast","descriptionNoSpaces":"displaysbrief,temporarynotificationsthatconfirmactionsorprovidestatusupdateswithoutinterruptingtheuser'sworkflow.","tagsNoSpaces":"componentnotificationfeedbacktransient","titleWords":["toast"],"descriptionWords":["displays","brief,","temporary","notifications","that","confirm","actions","or","provide","status","updates","without","interrupting","the","user's","workflow."],"tagsWords":["component","notification","feedback","transient"]}},{"id":"Components-ToggleButton","title":"Toggle button","exportName":"ToggleButton","description":"An interactive button that toggles between two binary states such as active and inactive.","tags":["component","buttons","toggle","controls"],"route":"components/buttons/toggle-button","menu":["Components","Buttons","Toggle button"],"content":"Overview\n\nA toggle button is used similarly to a checkbox or a radio button, but supports\na smaller interactive component that can be used to give a binary active state\nchoice to users that can be used alone or in combination with other choices. A\ntoggle button or toggle icon button gives a user a new way of visualizing the\ninformation in the interface. It does not typically perform an action. Please\nuse a button or an icon button for these uses.\n\nResources\n\nDeep dive into implementation details","_lower":{"title":"toggle button","description":"an interactive button that toggles between two binary states such as active and inactive.","tags":"component buttons toggle controls","content":"overview\n\na toggle button is used similarly to a checkbox or a radio button, but supports\na smaller interactive component that can be used to give a binary active state\nchoice to users that can be used alone or in combination with other choices. a\ntoggle button or toggle icon button gives a user a new way of visualizing the\ninformation in the interface. it does not typically perform an action. please\nuse a button or an icon button for these uses.\n\nresources\n\ndeep dive into implementation details","combined":"toggle button an interactive button that toggles between two binary states such as active and inactive. component buttons toggle controls overview\n\na toggle button is used similarly to a checkbox or a radio button, but supports\na smaller interactive component that can be used to give a binary active state\nchoice to users that can be used alone or in combination with other choices. a\ntoggle button or toggle icon button gives a user a new way of visualizing the\ninformation in the interface. it does not typically perform an action. please\nuse a button or an icon button for these uses.\n\nresources\n\ndeep dive into implementation details","titleNoSpaces":"togglebutton","descriptionNoSpaces":"aninteractivebuttonthattogglesbetweentwobinarystatessuchasactiveandinactive.","tagsNoSpaces":"componentbuttonstogglecontrols","titleWords":["toggle","button"],"descriptionWords":["an","interactive","button","that","toggles","between","two","binary","states","such","as","active","and","inactive."],"tagsWords":["component","buttons","toggle","controls"]}},{"id":"Components-ToggleButtonGroup","title":"Toggle button group","exportName":"ToggleButtonGroup","description":"A set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.","tags":["component","buttons","toggle","group","controls"],"route":"components/buttons/toggle-button-group","menu":["Components","Buttons","Toggle button group"],"content":"Overview\n\nButton groups can be used several ways, with and without icons, and spanning\nfrom two selections to several.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nToggleButtonGroup on react-aria\n\nRelevant W3C Aria pattern\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nToggle Button Groups come in different sizes to fit various layout needs.\n\nMedium\n\nThis is the default size.\n\n``jsx live\nconst App = () => (\n  <ToggleButtonGroup.Root ","_lower":{"title":"toggle button group","description":"a set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.","tags":"component buttons toggle group controls","content":"overview\n\nbutton groups can be used several ways, with and without icons, and spanning\nfrom two selections to several.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\ntogglebuttongroup on react-aria\n\nrelevant w3c aria pattern\n\nvariables\n\nget familiar with the features.\n\nsize\n\ntoggle button groups come in different sizes to fit various layout needs.\n\nmedium\n\nthis is the default size.\n\n``jsx live\nconst app = () => (\n  <togglebuttongroup.root ","combined":"toggle button group a set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access. component buttons toggle group controls overview\n\nbutton groups can be used several ways, with and without icons, and spanning\nfrom two selections to several.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\ntogglebuttongroup on react-aria\n\nrelevant w3c aria pattern\n\nvariables\n\nget familiar with the features.\n\nsize\n\ntoggle button groups come in different sizes to fit various layout needs.\n\nmedium\n\nthis is the default size.\n\n``jsx live\nconst app = () => (\n  <togglebuttongroup.root ","titleNoSpaces":"togglebuttongroup","descriptionNoSpaces":"asetofcloselyrelated,mutuallyexclusiveorcomplementaryactionsthatareimportantenoughtobedisplayeddirectlyintheinterfaceforquickaccess.","tagsNoSpaces":"componentbuttonstogglegroupcontrols","titleWords":["toggle","button","group"],"descriptionWords":["a","set","of","closely","related,","mutually","exclusive","or","complementary","actions","that","are","important","enough","to","be","displayed","directly","in","the","interface","for","quick","access."],"tagsWords":["component","buttons","toggle","group","controls"]}},{"id":"Components-Toolbar","title":"Toolbar","exportName":"Toolbar","description":"Toolbars organize related actions and controls in a compact bar for easy access. They provide consistent placement for common or contextual tasks within an application.","tags":["component","toolbar","actions","controls"],"route":"components/navigation/toolbar","menu":["Components","Navigation","Toolbar"],"content":"Overview\n\nA toolbar is a handy container that organizes a group of related buttons and\ntools, using both horizontal and vertical layouts to fit the screen;\nessentially, it gives users quick access to the most common actions they need\nright now.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nHorizontal\n\nMost commonly used, horizontal toolbars should sit above the content meant to b","_lower":{"title":"toolbar","description":"toolbars organize related actions and controls in a compact bar for easy access. they provide consistent placement for common or contextual tasks within an application.","tags":"component toolbar actions controls","content":"overview\n\na toolbar is a handy container that organizes a group of related buttons and\ntools, using both horizontal and vertical layouts to fit the screen;\nessentially, it gives users quick access to the most common actions they need\nright now.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nhorizontal\n\nmost commonly used, horizontal toolbars should sit above the content meant to b","combined":"toolbar toolbars organize related actions and controls in a compact bar for easy access. they provide consistent placement for common or contextual tasks within an application. component toolbar actions controls overview\n\na toolbar is a handy container that organizes a group of related buttons and\ntools, using both horizontal and vertical layouts to fit the screen;\nessentially, it gives users quick access to the most common actions they need\nright now.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nhorizontal\n\nmost commonly used, horizontal toolbars should sit above the content meant to b","titleNoSpaces":"toolbar","descriptionNoSpaces":"toolbarsorganizerelatedactionsandcontrolsinacompactbarforeasyaccess.theyprovideconsistentplacementforcommonorcontextualtaskswithinanapplication.","tagsNoSpaces":"componenttoolbaractionscontrols","titleWords":["toolbar"],"descriptionWords":["toolbars","organize","related","actions","and","controls","in","a","compact","bar","for","easy","access.","they","provide","consistent","placement","for","common","or","contextual","tasks","within","an","application."],"tagsWords":["component","toolbar","actions","controls"]}},{"id":"Components-tooltip","title":"Tooltip","exportName":"Tooltip","description":"A contextual popup that displays a description for an element.","tags":["component","tooltip","popover","hint","hover"],"route":"components/feedback/tooltip","menu":["Components","Feedback","Tooltip"],"content":"Overview\n\nTooltips offer concise, non-obtrusive guidance and supplemental information,\nenhancing user understanding and interaction with UI elements.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact-Aria Tooltip Docs\nARIA Tooltip Pattern\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nPlacements\n\nTooltip placements can populate in different areas, please chose a direction\nthat will be most visible for the users. and the elements that may b","_lower":{"title":"tooltip","description":"a contextual popup that displays a description for an element.","tags":"component tooltip popover hint hover","content":"overview\n\ntooltips offer concise, non-obtrusive guidance and supplemental information,\nenhancing user understanding and interaction with ui elements.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact-aria tooltip docs\naria tooltip pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nplacements\n\ntooltip placements can populate in different areas, please chose a direction\nthat will be most visible for the users. and the elements that may b","combined":"tooltip a contextual popup that displays a description for an element. component tooltip popover hint hover overview\n\ntooltips offer concise, non-obtrusive guidance and supplemental information,\nenhancing user understanding and interaction with ui elements.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact-aria tooltip docs\naria tooltip pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nplacements\n\ntooltip placements can populate in different areas, please chose a direction\nthat will be most visible for the users. and the elements that may b","titleNoSpaces":"tooltip","descriptionNoSpaces":"acontextualpopupthatdisplaysadescriptionforanelement.","tagsNoSpaces":"componenttooltippopoverhinthover","titleWords":["tooltip"],"descriptionWords":["a","contextual","popup","that","displays","a","description","for","an","element."],"tagsWords":["component","tooltip","popover","hint","hover"]}},{"id":"Components-Typography","title":"Typography","description":"Components for text styling and formatting.","tags":["document"],"route":"components/typography","menu":["Components","Typography"],"content":"Typography\n\nComponents for text styling and formatting.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"typography","description":"components for text styling and formatting.","tags":"document","content":"typography\n\ncomponents for text styling and formatting.\n\n<categoryoverview variant=\"list\" />","combined":"typography components for text styling and formatting. document typography\n\ncomponents for text styling and formatting.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"typography","descriptionNoSpaces":"componentsfortextstylingandformatting.","tagsNoSpaces":"document","titleWords":["typography"],"descriptionWords":["components","for","text","styling","and","formatting."],"tagsWords":["document"]}},{"id":"Components-Utilities","title":"Utilities","description":"Low-level or functional components for utility purposes.","tags":["document"],"route":"components/utilities","menu":["Components","Utilities"],"content":"Utilities\n\nLow-level or functional components for utility purposes.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"utilities","description":"low-level or functional components for utility purposes.","tags":"document","content":"utilities\n\nlow-level or functional components for utility purposes.\n\n<categoryoverview variant=\"list\" />","combined":"utilities low-level or functional components for utility purposes. document utilities\n\nlow-level or functional components for utility purposes.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"utilities","descriptionNoSpaces":"low-levelorfunctionalcomponentsforutilitypurposes.","tagsNoSpaces":"document","titleWords":["utilities"],"descriptionWords":["low-level","or","functional","components","for","utility","purposes."],"tagsWords":["document"]}},{"id":"Components-VisuallyHidden","title":"Visually hidden","exportName":"VisuallyHidden","description":"Makes content accessible to screen readers but hides it visually.","tags":["component","accessibility","screen reader","hidden","a11y"],"route":"components/accessibility/visually-hidden","menu":["Components","Accessibility","Visually hidden"],"content":"Basic usage\n\nJust wrap the content you want to hide visually, but keep accessible to screen\nreaders, with the VisuallyHidden component.\n\n``jsx\nconst App = () => <VisuallyHidden>I am VisuallyHidden!</VisuallyHidden>;\n`\n\nFocusable content\n\nIf the content you want to hide visually contains focusable elements, add the\nisFocusable property to the VisuallyHidden component. The content then\nbecomes visible if the first focusable element inside is focused with the\n_keyboard_.\n\n`jsx live\nconst App = () =","_lower":{"title":"visually hidden","description":"makes content accessible to screen readers but hides it visually.","tags":"component accessibility screen reader hidden a11y","content":"basic usage\n\njust wrap the content you want to hide visually, but keep accessible to screen\nreaders, with the visuallyhidden component.\n\n``jsx\nconst app = () => <visuallyhidden>i am visuallyhidden!</visuallyhidden>;\n`\n\nfocusable content\n\nif the content you want to hide visually contains focusable elements, add the\nisfocusable property to the visuallyhidden component. the content then\nbecomes visible if the first focusable element inside is focused with the\n_keyboard_.\n\n`jsx live\nconst app = () =","combined":"visually hidden makes content accessible to screen readers but hides it visually. component accessibility screen reader hidden a11y basic usage\n\njust wrap the content you want to hide visually, but keep accessible to screen\nreaders, with the visuallyhidden component.\n\n``jsx\nconst app = () => <visuallyhidden>i am visuallyhidden!</visuallyhidden>;\n`\n\nfocusable content\n\nif the content you want to hide visually contains focusable elements, add the\nisfocusable property to the visuallyhidden component. the content then\nbecomes visible if the first focusable element inside is focused with the\n_keyboard_.\n\n`jsx live\nconst app = () =","titleNoSpaces":"visuallyhidden","descriptionNoSpaces":"makescontentaccessibletoscreenreadersbuthidesitvisually.","tagsNoSpaces":"componentaccessibilityscreenreaderhiddena11y","titleWords":["visually","hidden"],"descriptionWords":["makes","content","accessible","to","screen","readers","but","hides","it","visually."],"tagsWords":["component","accessibility","screen","reader","hidden","a11y"]}},{"id":"Compound-Component-Extraction","title":"ADR: Standardizing Compound Component Extraction to a `components` Directory","description":"Architecture decision record on organizing compound component implementations","tags":["architecture","components","directory-structure","organization"],"route":"home/contribute/adrs/adr0002-compound-component-extraction","menu":["Home","Contribute","ADR's","ADR0002 Compound Component Extraction"],"content":"ADR: Standardizing Compound Component Extraction to a components Directory\n\nContext\n\nTo enhance the organization, maintainability, and scalability of our components\nthat utilize the compound component pattern, we are establishing a consistent\ndirectory structure for their implementation. This ADR outlines the principle of\nextracting the core root component and its associated compound sub-components\ninto a dedicated components subdirectory.\n\nDecision\n\nFor any component (<ComponentName>) that foll","_lower":{"title":"adr: standardizing compound component extraction to a `components` directory","description":"architecture decision record on organizing compound component implementations","tags":"architecture components directory-structure organization","content":"adr: standardizing compound component extraction to a components directory\n\ncontext\n\nto enhance the organization, maintainability, and scalability of our components\nthat utilize the compound component pattern, we are establishing a consistent\ndirectory structure for their implementation. this adr outlines the principle of\nextracting the core root component and its associated compound sub-components\ninto a dedicated components subdirectory.\n\ndecision\n\nfor any component (<componentname>) that foll","combined":"adr: standardizing compound component extraction to a `components` directory architecture decision record on organizing compound component implementations architecture components directory-structure organization adr: standardizing compound component extraction to a components directory\n\ncontext\n\nto enhance the organization, maintainability, and scalability of our components\nthat utilize the compound component pattern, we are establishing a consistent\ndirectory structure for their implementation. this adr outlines the principle of\nextracting the core root component and its associated compound sub-components\ninto a dedicated components subdirectory.\n\ndecision\n\nfor any component (<componentname>) that foll","titleNoSpaces":"adr:standardizingcompoundcomponentextractiontoa`components`directory","descriptionNoSpaces":"architecturedecisionrecordonorganizingcompoundcomponentimplementations","tagsNoSpaces":"architecturecomponentsdirectory-structureorganization","titleWords":["adr:","standardizing","compound","component","extraction","to","a","`components`","directory"],"descriptionWords":["architecture","decision","record","on","organizing","compound","component","implementations"],"tagsWords":["architecture","components","directory-structure","organization"]}},{"id":"Consumer-Component-APIs","title":"ADR: On Consumer Component API's","description":"Architecture decision record on how to structure component APIs for flexibility and maintainability","tags":["architecture","components","design","api"],"route":"home/contribute/adrs/adr0001-consumer-component-apis","menu":["Home","Contribute","ADR's","ADR0001 Consumer Component APIs"],"content":"ADR: On Consumer Component API's\n\nContext\n\nWe needed an Alert component to show informational or warning messages. The\ncomponent should allow:\n\n- A title and description.\n- An optional dismiss button.\n- Additional buttons or controls.\n- Spacing/styling overrides (e.g. px, py).\n\nIn early explorations, we tried to expose everything via props on the main\nAlert—this seemed convenient but would quickly became unwieldy when\nrequirements changed. This led to a discussion about how to structure the API\n","_lower":{"title":"adr: on consumer component api's","description":"architecture decision record on how to structure component apis for flexibility and maintainability","tags":"architecture components design api","content":"adr: on consumer component api's\n\ncontext\n\nwe needed an alert component to show informational or warning messages. the\ncomponent should allow:\n\n- a title and description.\n- an optional dismiss button.\n- additional buttons or controls.\n- spacing/styling overrides (e.g. px, py).\n\nin early explorations, we tried to expose everything via props on the main\nalert—this seemed convenient but would quickly became unwieldy when\nrequirements changed. this led to a discussion about how to structure the api\n","combined":"adr: on consumer component api's architecture decision record on how to structure component apis for flexibility and maintainability architecture components design api adr: on consumer component api's\n\ncontext\n\nwe needed an alert component to show informational or warning messages. the\ncomponent should allow:\n\n- a title and description.\n- an optional dismiss button.\n- additional buttons or controls.\n- spacing/styling overrides (e.g. px, py).\n\nin early explorations, we tried to expose everything via props on the main\nalert—this seemed convenient but would quickly became unwieldy when\nrequirements changed. this led to a discussion about how to structure the api\n","titleNoSpaces":"adr:onconsumercomponentapi's","descriptionNoSpaces":"architecturedecisionrecordonhowtostructurecomponentapisforflexibilityandmaintainability","tagsNoSpaces":"architecturecomponentsdesignapi","titleWords":["adr:","on","consumer","component","api's"],"descriptionWords":["architecture","decision","record","on","how","to","structure","component","apis","for","flexibility","and","maintainability"],"tagsWords":["architecture","components","design","api"]}},{"id":"DesignTokens","title":"Design Tokens","description":"Style definitions (colors, fonts, spacing, etc.) for consistent UI components.","tags":["tokens","design"],"route":"home/design-tokens","menu":["Home","Design Tokens"],"content":"Design Tokens\n\n<CategoryOverview />","_lower":{"title":"design tokens","description":"style definitions (colors, fonts, spacing, etc.) for consistent ui components.","tags":"tokens design","content":"design tokens\n\n<categoryoverview />","combined":"design tokens style definitions (colors, fonts, spacing, etc.) for consistent ui components. tokens design design tokens\n\n<categoryoverview />","titleNoSpaces":"designtokens","descriptionNoSpaces":"styledefinitions(colors,fonts,spacing,etc.)forconsistentuicomponents.","tagsNoSpaces":"tokensdesign","titleWords":["design","tokens"],"descriptionWords":["style","definitions","(colors,","fonts,","spacing,","etc.)","for","consistent","ui","components."],"tagsWords":["tokens","design"]}},{"id":"Home","title":"Home","description":"Start here if you're new.","tags":["forms"],"route":"home","menu":["Home"],"content":"<Frontpage />","_lower":{"title":"home","description":"start here if you're new.","tags":"forms","content":"<frontpage />","combined":"home start here if you're new. forms <frontpage />","titleNoSpaces":"home","descriptionNoSpaces":"starthereifyou'renew.","tagsNoSpaces":"forms","titleWords":["home"],"descriptionWords":["start","here","if","you're","new."],"tagsWords":["forms"]}},{"id":"Home-Contribute-1746704391512","title":"Contributing","description":"Contribute to the nimbus development","tags":["guide","contributing","development"],"route":"home/contribute","menu":["Home","Contribute"],"content":"Contributing\n\nContribute to the nimbus development.","_lower":{"title":"contributing","description":"contribute to the nimbus development","tags":"guide contributing development","content":"contributing\n\ncontribute to the nimbus development.","combined":"contributing contribute to the nimbus development guide contributing development contributing\n\ncontribute to the nimbus development.","titleNoSpaces":"contributing","descriptionNoSpaces":"contributetothenimbusdevelopment","tagsNoSpaces":"guidecontributingdevelopment","titleWords":["contributing"],"descriptionWords":["contribute","to","the","nimbus","development"],"tagsWords":["guide","contributing","development"]}},{"id":"Home-Contribute-Setup","title":"Local Development Setup","description":"Set up nimbus for local development","tags":["document"],"route":"home/contribute/development-setup","menu":["Home","Contribute","Development Setup"],"content":"Getting Started\n\nPrerequisites\n\nBefore you begin, make sure you have the following installed:\n\n- Node.js: v22.14.0+\n- PNPM: v9.12.3+\n\nInstallation\n\n1. Clone the repository:\n\n``bash\ngit clone https://github.com/commercetools/nimbus.git\n`\n\n2. Enter the repository directory:\n\n`bash\ncd nimbus\n`\n\n3. Initialize the project:\n\n`bash\npnpm nimbus:init\n`\n\nDevelopment\n\nStarting the Development Environment\n\nStart the development environment with the following command:\n\n`bash\npnpm start\n`\n\nThis will start bot","_lower":{"title":"local development setup","description":"set up nimbus for local development","tags":"document","content":"getting started\n\nprerequisites\n\nbefore you begin, make sure you have the following installed:\n\n- node.js: v22.14.0+\n- pnpm: v9.12.3+\n\ninstallation\n\n1. clone the repository:\n\n``bash\ngit clone https://github.com/commercetools/nimbus.git\n`\n\n2. enter the repository directory:\n\n`bash\ncd nimbus\n`\n\n3. initialize the project:\n\n`bash\npnpm nimbus:init\n`\n\ndevelopment\n\nstarting the development environment\n\nstart the development environment with the following command:\n\n`bash\npnpm start\n`\n\nthis will start bot","combined":"local development setup set up nimbus for local development document getting started\n\nprerequisites\n\nbefore you begin, make sure you have the following installed:\n\n- node.js: v22.14.0+\n- pnpm: v9.12.3+\n\ninstallation\n\n1. clone the repository:\n\n``bash\ngit clone https://github.com/commercetools/nimbus.git\n`\n\n2. enter the repository directory:\n\n`bash\ncd nimbus\n`\n\n3. initialize the project:\n\n`bash\npnpm nimbus:init\n`\n\ndevelopment\n\nstarting the development environment\n\nstart the development environment with the following command:\n\n`bash\npnpm start\n`\n\nthis will start bot","titleNoSpaces":"localdevelopmentsetup","descriptionNoSpaces":"setupnimbusforlocaldevelopment","tagsNoSpaces":"document","titleWords":["local","development","setup"],"descriptionWords":["set","up","nimbus","for","local","development"],"tagsWords":["document"]}},{"id":"Home-Core Concepts","title":"Core Concepts","description":"Quick start guide to set up and use the package.","tags":["document"],"route":"home/getting-started/core-concepts","menu":["Home","Getting Started","Core Concepts"],"content":"Core concepts\n\nThis page is designed to help you understand the foundational concepts so that\nyou can get quickly started with using the Nimbus Design System in your\nprojects.\n\nNimbus aims to provide a comprehensive suite of accessible and pre-themed React components, enabling developers to build beautiful and consistent user interfaces with ease. However, it's important to understand the following underlying concepts to make the most of the system.\n\nTechnical foundation\n\n- Nimbus is a react com","_lower":{"title":"core concepts","description":"quick start guide to set up and use the package.","tags":"document","content":"core concepts\n\nthis page is designed to help you understand the foundational concepts so that\nyou can get quickly started with using the nimbus design system in your\nprojects.\n\nnimbus aims to provide a comprehensive suite of accessible and pre-themed react components, enabling developers to build beautiful and consistent user interfaces with ease. however, it's important to understand the following underlying concepts to make the most of the system.\n\ntechnical foundation\n\n- nimbus is a react com","combined":"core concepts quick start guide to set up and use the package. document core concepts\n\nthis page is designed to help you understand the foundational concepts so that\nyou can get quickly started with using the nimbus design system in your\nprojects.\n\nnimbus aims to provide a comprehensive suite of accessible and pre-themed react components, enabling developers to build beautiful and consistent user interfaces with ease. however, it's important to understand the following underlying concepts to make the most of the system.\n\ntechnical foundation\n\n- nimbus is a react com","titleNoSpaces":"coreconcepts","descriptionNoSpaces":"quickstartguidetosetupandusethepackage.","tagsNoSpaces":"document","titleWords":["core","concepts"],"descriptionWords":["quick","start","guide","to","set","up","and","use","the","package."],"tagsWords":["document"]}},{"id":"Home-Installation-1746704940030","title":"Installation","description":"How to add Nimbus to your react frontend","tags":["guide","setup","installation"],"route":"home/getting-started/installation","menu":["Home","Getting Started","Installation"],"content":"Installation\n\nHow to add Nimbus to your react frontend.\n\n1. Install the nimbus packages\n\nYou can install Nimbus using your preferred package manager.\n\nCore Installation\n\nInstall the core Nimbus packages along with required peer dependencies:\n\npnpm\n\n``bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nnpm\n\n`bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nyarn\n\n`bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @","_lower":{"title":"installation","description":"how to add nimbus to your react frontend","tags":"guide setup installation","content":"installation\n\nhow to add nimbus to your react frontend.\n\n1. install the nimbus packages\n\nyou can install nimbus using your preferred package manager.\n\ncore installation\n\ninstall the core nimbus packages along with required peer dependencies:\n\npnpm\n\n``bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nnpm\n\n`bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nyarn\n\n`bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @","combined":"installation how to add nimbus to your react frontend guide setup installation installation\n\nhow to add nimbus to your react frontend.\n\n1. install the nimbus packages\n\nyou can install nimbus using your preferred package manager.\n\ncore installation\n\ninstall the core nimbus packages along with required peer dependencies:\n\npnpm\n\n``bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nnpm\n\n`bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nyarn\n\n`bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @","titleNoSpaces":"installation","descriptionNoSpaces":"howtoaddnimbustoyourreactfrontend","tagsNoSpaces":"guidesetupinstallation","titleWords":["installation"],"descriptionWords":["how","to","add","nimbus","to","your","react","frontend"],"tagsWords":["guide","setup","installation"]}},{"id":"Home-MCP-Overview","title":"MCP Server Overview","description":"What the Nimbus MCP server is, what it enables, and which AI assistants it supports","tags":["mcp","ai","developer-tools"],"route":"home/getting-started/mcp-server-overview","menu":["Home","Getting Started","MCP Server Overview"],"content":"MCP Server Overview\n\nIf you use an AI coding assistant (Claude, Copilot, Cursor, etc.), the Nimbus\nMCP server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nThe Nimbus MCP Server (@commercetools/nimbus-mcp) exposes component\ndocumentation, design tokens, and icons to AI assistants through the\nModel Context Protocol (MCP), so they can\nproduce code that follows Nimbus conventions out of the box.\n\nWhat Is MCP?\n\nThe Model Context Protocol is an open sta","_lower":{"title":"mcp server overview","description":"what the nimbus mcp server is, what it enables, and which ai assistants it supports","tags":"mcp ai developer-tools","content":"mcp server overview\n\nif you use an ai coding assistant (claude, copilot, cursor, etc.), the nimbus\nmcp server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nthe nimbus mcp server (@commercetools/nimbus-mcp) exposes component\ndocumentation, design tokens, and icons to ai assistants through the\nmodel context protocol (mcp), so they can\nproduce code that follows nimbus conventions out of the box.\n\nwhat is mcp?\n\nthe model context protocol is an open sta","combined":"mcp server overview what the nimbus mcp server is, what it enables, and which ai assistants it supports mcp ai developer-tools mcp server overview\n\nif you use an ai coding assistant (claude, copilot, cursor, etc.), the nimbus\nmcp server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nthe nimbus mcp server (@commercetools/nimbus-mcp) exposes component\ndocumentation, design tokens, and icons to ai assistants through the\nmodel context protocol (mcp), so they can\nproduce code that follows nimbus conventions out of the box.\n\nwhat is mcp?\n\nthe model context protocol is an open sta","titleNoSpaces":"mcpserveroverview","descriptionNoSpaces":"whatthenimbusmcpserveris,whatitenables,andwhichaiassistantsitsupports","tagsNoSpaces":"mcpaideveloper-tools","titleWords":["mcp","server","overview"],"descriptionWords":["what","the","nimbus","mcp","server","is,","what","it","enables,","and","which","ai","assistants","it","supports"],"tagsWords":["mcp","ai","developer-tools"]}},{"id":"Home-MCP-Setup","title":"MCP Server Setup","description":"Install and configure the Nimbus MCP server for your AI assistant","tags":["mcp","ai","developer-tools","setup"],"route":"home/getting-started/mcp-server-setup","menu":["Home","Getting Started","MCP Server Setup"],"content":"MCP Server Setup\n\nThis guide walks through installing the Nimbus MCP server and configuring it for\nyour AI assistant. Setup takes about two minutes.\n\nPrerequisites\n\n- Node.js v18 or later (includes npx)\n- An AI assistant that supports MCP (see\n  supported assistants)\n\nHow It Works\n\nYou don't run the MCP server yourself. Instead, you add a small JSON config to\nyour AI assistant telling it _how_ to start the server. The assistant launches\nthe server automatically when a session begins and communic","_lower":{"title":"mcp server setup","description":"install and configure the nimbus mcp server for your ai assistant","tags":"mcp ai developer-tools setup","content":"mcp server setup\n\nthis guide walks through installing the nimbus mcp server and configuring it for\nyour ai assistant. setup takes about two minutes.\n\nprerequisites\n\n- node.js v18 or later (includes npx)\n- an ai assistant that supports mcp (see\n  supported assistants)\n\nhow it works\n\nyou don't run the mcp server yourself. instead, you add a small json config to\nyour ai assistant telling it _how_ to start the server. the assistant launches\nthe server automatically when a session begins and communic","combined":"mcp server setup install and configure the nimbus mcp server for your ai assistant mcp ai developer-tools setup mcp server setup\n\nthis guide walks through installing the nimbus mcp server and configuring it for\nyour ai assistant. setup takes about two minutes.\n\nprerequisites\n\n- node.js v18 or later (includes npx)\n- an ai assistant that supports mcp (see\n  supported assistants)\n\nhow it works\n\nyou don't run the mcp server yourself. instead, you add a small json config to\nyour ai assistant telling it _how_ to start the server. the assistant launches\nthe server automatically when a session begins and communic","titleNoSpaces":"mcpserversetup","descriptionNoSpaces":"installandconfigurethenimbusmcpserverforyouraiassistant","tagsNoSpaces":"mcpaideveloper-toolssetup","titleWords":["mcp","server","setup"],"descriptionWords":["install","and","configure","the","nimbus","mcp","server","for","your","ai","assistant"],"tagsWords":["mcp","ai","developer-tools","setup"]}},{"id":"Home-Playground","title":"Playground","description":"collection of pages with an explorative character","tags":["playground","exploring"],"route":"home/playground","menu":["Home","Playground"],"content":"Playground\n\nThis is the place to try out things.","_lower":{"title":"playground","description":"collection of pages with an explorative character","tags":"playground exploring","content":"playground\n\nthis is the place to try out things.","combined":"playground collection of pages with an explorative character playground exploring playground\n\nthis is the place to try out things.","titleNoSpaces":"playground","descriptionNoSpaces":"collectionofpageswithanexplorativecharacter","tagsNoSpaces":"playgroundexploring","titleWords":["playground"],"descriptionWords":["collection","of","pages","with","an","explorative","character"],"tagsWords":["playground","exploring"]}},{"id":"Home-Release-Process","title":"Release Process","description":"How Nimbus releases work and how to stay informed","tags":["releases","versioning","upgrades","support"],"route":"home/getting-started/release-process","menu":["Home","Getting Started","Release Process"],"content":"Release Process\n\nThis page explains how Nimbus releases work, what to expect from each release\ntype, and how to stay informed about changes that may affect your application.\n\nRelease Cadence\n\nNimbus follows Semantic Versioning:\n\n| Release Type      | Frequency    | Contents                           |\n| ----------------- | ------------ | ---------------------------------- |\n| Major (X.0.0) | As needed    | Breaking changes, major features   |\n| Minor (x.Y.0) | As needed    | New features, non-br","_lower":{"title":"release process","description":"how nimbus releases work and how to stay informed","tags":"releases versioning upgrades support","content":"release process\n\nthis page explains how nimbus releases work, what to expect from each release\ntype, and how to stay informed about changes that may affect your application.\n\nrelease cadence\n\nnimbus follows semantic versioning:\n\n| release type      | frequency    | contents                           |\n| ----------------- | ------------ | ---------------------------------- |\n| major (x.0.0) | as needed    | breaking changes, major features   |\n| minor (x.y.0) | as needed    | new features, non-br","combined":"release process how nimbus releases work and how to stay informed releases versioning upgrades support release process\n\nthis page explains how nimbus releases work, what to expect from each release\ntype, and how to stay informed about changes that may affect your application.\n\nrelease cadence\n\nnimbus follows semantic versioning:\n\n| release type      | frequency    | contents                           |\n| ----------------- | ------------ | ---------------------------------- |\n| major (x.0.0) | as needed    | breaking changes, major features   |\n| minor (x.y.0) | as needed    | new features, non-br","titleNoSpaces":"releaseprocess","descriptionNoSpaces":"hownimbusreleasesworkandhowtostayinformed","tagsNoSpaces":"releasesversioningupgradessupport","titleWords":["release","process"],"descriptionWords":["how","nimbus","releases","work","and","how","to","stay","informed"],"tagsWords":["releases","versioning","upgrades","support"]}},{"id":"Home-Style Props","title":"Style Props","description":"JSX style props for applying CSS rules","tags":["document"],"route":"home/style-props","menu":["Home","Style Props"],"content":"Style Props\n\nJSX style props for applying CSS rules\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"style props","description":"jsx style props for applying css rules","tags":"document","content":"style props\n\njsx style props for applying css rules\n\n<categoryoverview variant=\"list\" />","combined":"style props jsx style props for applying css rules document style props\n\njsx style props for applying css rules\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"styleprops","descriptionNoSpaces":"jsxstylepropsforapplyingcssrules","tagsNoSpaces":"document","titleWords":["style","props"],"descriptionWords":["jsx","style","props","for","applying","css","rules"],"tagsWords":["document"]}},{"id":"Home-Testing-Setup","title":"Testing Setup","description":"Configure Jest or Vitest to test Nimbus components","tags":["guide","testing","jest","vitest"],"route":"home/getting-started/testing-setup","menu":["Home","Getting Started","Testing Setup"],"content":"Testing Setup\n\nNimbus components require specific polyfills to work in JSDOM test environments (Jest, Vitest). This guide shows you how to configure your test runner to work with Nimbus.\n\nWhy JSDOM Polyfills?\n\nJSDOM is a headless browser environment used by Jest and Vitest. It doesn't include all browser APIs that Chakra UI and React Aria (which Nimbus is built on) depend on. Nimbus provides polyfills for these missing APIs.\n\nThe polyfills include:\n- structuredClone - Required by Chakra UI for t","_lower":{"title":"testing setup","description":"configure jest or vitest to test nimbus components","tags":"guide testing jest vitest","content":"testing setup\n\nnimbus components require specific polyfills to work in jsdom test environments (jest, vitest). this guide shows you how to configure your test runner to work with nimbus.\n\nwhy jsdom polyfills?\n\njsdom is a headless browser environment used by jest and vitest. it doesn't include all browser apis that chakra ui and react aria (which nimbus is built on) depend on. nimbus provides polyfills for these missing apis.\n\nthe polyfills include:\n- structuredclone - required by chakra ui for t","combined":"testing setup configure jest or vitest to test nimbus components guide testing jest vitest testing setup\n\nnimbus components require specific polyfills to work in jsdom test environments (jest, vitest). this guide shows you how to configure your test runner to work with nimbus.\n\nwhy jsdom polyfills?\n\njsdom is a headless browser environment used by jest and vitest. it doesn't include all browser apis that chakra ui and react aria (which nimbus is built on) depend on. nimbus provides polyfills for these missing apis.\n\nthe polyfills include:\n- structuredclone - required by chakra ui for t","titleNoSpaces":"testingsetup","descriptionNoSpaces":"configurejestorvitesttotestnimbuscomponents","tagsNoSpaces":"guidetestingjestvitest","titleWords":["testing","setup"],"descriptionWords":["configure","jest","or","vitest","to","test","nimbus","components"],"tagsWords":["guide","testing","jest","vitest"]}},{"id":"Hooke","title":"Hooke","description":"react hooks","tags":["hooks","react"],"route":"hooks","menu":["Hooks"],"content":"Hooks\n\nA collection of useful react hooks.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"hooke","description":"react hooks","tags":"hooks react","content":"hooks\n\na collection of useful react hooks.\n\n<categoryoverview variant=\"list\" />","combined":"hooke react hooks hooks react hooks\n\na collection of useful react hooks.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"hooke","descriptionNoSpaces":"reacthooks","tagsNoSpaces":"hooksreact","titleWords":["hooke"],"descriptionWords":["react","hooks"],"tagsWords":["hooks","react"]}},{"id":"Icons","title":"Icons","description":"display Icons","tags":["icons"],"route":"icons","menu":["Icons"],"content":"Icons\n\nIcons come from a separate package. Each Icon is a react component that can be\nused in any other component.\n\n> [!NOTE]  \n> If you can't find a fitting Icon, you may want to use the external\n> material ui icon search\n> as the search below does not have access to Icon meta-data, only to\n> component-names.\n\nHere is the list of available icons:\n\n<IconSearch />","_lower":{"title":"icons","description":"display icons","tags":"icons","content":"icons\n\nicons come from a separate package. each icon is a react component that can be\nused in any other component.\n\n> [!note]  \n> if you can't find a fitting icon, you may want to use the external\n> material ui icon search\n> as the search below does not have access to icon meta-data, only to\n> component-names.\n\nhere is the list of available icons:\n\n<iconsearch />","combined":"icons display icons icons icons\n\nicons come from a separate package. each icon is a react component that can be\nused in any other component.\n\n> [!note]  \n> if you can't find a fitting icon, you may want to use the external\n> material ui icon search\n> as the search below does not have access to icon meta-data, only to\n> component-names.\n\nhere is the list of available icons:\n\n<iconsearch />","titleNoSpaces":"icons","descriptionNoSpaces":"displayicons","tagsNoSpaces":"icons","titleWords":["icons"],"descriptionWords":["display","icons"],"tagsWords":["icons"]}},{"id":"Layout","title":"Layout","description":"Components that structure the content on the page.","tags":["layout"],"route":"components/layout","menu":["Components","Layout"],"content":"Layout\n\nComponents that structure the content on the page.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"layout","description":"components that structure the content on the page.","tags":"layout","content":"layout\n\ncomponents that structure the content on the page.\n\n<categoryoverview variant=\"list\" />","combined":"layout components that structure the content on the page. layout layout\n\ncomponents that structure the content on the page.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"layout","descriptionNoSpaces":"componentsthatstructurethecontentonthepage.","tagsNoSpaces":"layout","titleWords":["layout"],"descriptionWords":["components","that","structure","the","content","on","the","page."],"tagsWords":["layout"]}},{"id":"Markdown","title":"Markdown","description":"a page with many mdx & markdown features","tags":["playground","markdown","mdx"],"route":"home/playground/markdown","menu":["Home","Playground","Markdown"],"content":"Markdown / MDX Stress Test\n\nThis is a page to stress test markdown & mdx syntax usages to see if everything\nrenders without issues.\n\nBasic Markdown\n\nBasic markdown is supported.\n\nHeadings\n\nSee the bold Text above? This is a heading. Not gonna demonstrate them, they are\nused everwhere on a page, but this is what you'd use in markdown or mdx files to\nwrite one:\n\n``markdown\nH1 Most important\n\nH2 Heading\n\nH3 Heading\n\nH4 Heading\n\nH5 Heading\n\nH6 Least important\n`\n\nEmphasizing Text\n\nItalic Text\n\n_Itali","_lower":{"title":"markdown","description":"a page with many mdx & markdown features","tags":"playground markdown mdx","content":"markdown / mdx stress test\n\nthis is a page to stress test markdown & mdx syntax usages to see if everything\nrenders without issues.\n\nbasic markdown\n\nbasic markdown is supported.\n\nheadings\n\nsee the bold text above? this is a heading. not gonna demonstrate them, they are\nused everwhere on a page, but this is what you'd use in markdown or mdx files to\nwrite one:\n\n``markdown\nh1 most important\n\nh2 heading\n\nh3 heading\n\nh4 heading\n\nh5 heading\n\nh6 least important\n`\n\nemphasizing text\n\nitalic text\n\n_itali","combined":"markdown a page with many mdx & markdown features playground markdown mdx markdown / mdx stress test\n\nthis is a page to stress test markdown & mdx syntax usages to see if everything\nrenders without issues.\n\nbasic markdown\n\nbasic markdown is supported.\n\nheadings\n\nsee the bold text above? this is a heading. not gonna demonstrate them, they are\nused everwhere on a page, but this is what you'd use in markdown or mdx files to\nwrite one:\n\n``markdown\nh1 most important\n\nh2 heading\n\nh3 heading\n\nh4 heading\n\nh5 heading\n\nh6 least important\n`\n\nemphasizing text\n\nitalic text\n\n_itali","titleNoSpaces":"markdown","descriptionNoSpaces":"apagewithmanymdx&markdownfeatures","tagsNoSpaces":"playgroundmarkdownmdx","titleWords":["markdown"],"descriptionWords":["a","page","with","many","mdx","&","markdown","features"],"tagsWords":["playground","markdown","mdx"]}},{"id":"Media","title":"Media","description":"Components for displaying media content.","tags":["media"],"route":"components/media","menu":["Components","Media"],"content":"Media\n\nComponents for displaying media content.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"media","description":"components for displaying media content.","tags":"media","content":"media\n\ncomponents for displaying media content.\n\n<categoryoverview variant=\"list\" />","combined":"media components for displaying media content. media media\n\ncomponents for displaying media content.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"media","descriptionNoSpaces":"componentsfordisplayingmediacontent.","tagsNoSpaces":"media","titleWords":["media"],"descriptionWords":["components","for","displaying","media","content."],"tagsWords":["media"]}},{"id":"NimbusExportStats","title":"Nimbus Export Stats","description":"List of exports from the @commercetools/nimbus package","tags":["stats","exports"],"route":"home/contribute/stats","menu":["Home","Contribute","Stats"],"content":"Nimbus Exports Stats\n\nThis page provides a list of all exports from the @commercetools/nimbus package.\n\n<NimbusExportsList />","_lower":{"title":"nimbus export stats","description":"list of exports from the @commercetools/nimbus package","tags":"stats exports","content":"nimbus exports stats\n\nthis page provides a list of all exports from the @commercetools/nimbus package.\n\n<nimbusexportslist />","combined":"nimbus export stats list of exports from the @commercetools/nimbus package stats exports nimbus exports stats\n\nthis page provides a list of all exports from the @commercetools/nimbus package.\n\n<nimbusexportslist />","titleNoSpaces":"nimbusexportstats","descriptionNoSpaces":"listofexportsfromthe@commercetools/nimbuspackage","tagsNoSpaces":"statsexports","titleWords":["nimbus","export","stats"],"descriptionWords":["list","of","exports","from","the","@commercetools/nimbus","package"],"tagsWords":["stats","exports"]}},{"id":"Patterns","title":"Patterns","description":"Reusable component patterns and compositions for common use cases","tags":["patterns","compositions","recipes"],"route":"patterns","menu":["Patterns"],"content":"Patterns\n\nA collection of reusable component patterns and compositions that combine multiple components to solve common UI challenges.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"patterns","description":"reusable component patterns and compositions for common use cases","tags":"patterns compositions recipes","content":"patterns\n\na collection of reusable component patterns and compositions that combine multiple components to solve common ui challenges.\n\n<categoryoverview variant=\"list\" />","combined":"patterns reusable component patterns and compositions for common use cases patterns compositions recipes patterns\n\na collection of reusable component patterns and compositions that combine multiple components to solve common ui challenges.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"patterns","descriptionNoSpaces":"reusablecomponentpatternsandcompositionsforcommonusecases","tagsNoSpaces":"patternscompositionsrecipes","titleWords":["patterns"],"descriptionWords":["reusable","component","patterns","and","compositions","for","common","use","cases"],"tagsWords":["patterns","compositions","recipes"]}},{"id":"Patterns-DateRangePickerField","title":"Date range picker field","exportName":"DateRangePickerField","description":"This pattern component integrates the DateRangePicker within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","DateRangePicker","DateRangePickerField"],"route":"patterns/fields/date-range-picker-field","menu":["Patterns","Fields","Date range picker field"],"content":"Overview\n\nDateRangePickerField is a pattern component that combines the FormField wrapper with the DateRangePicker input component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nResources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guide","_lower":{"title":"date range picker field","description":"this pattern component integrates the daterangepicker within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field daterangepicker daterangepickerfield","content":"overview\n\ndaterangepickerfield is a pattern component that combines the formfield wrapper with the daterangepicker input component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guide","combined":"date range picker field this pattern component integrates the daterangepicker within a formfield using a simple, consistent, and opinionated api. component pattern field daterangepicker daterangepickerfield overview\n\ndaterangepickerfield is a pattern component that combines the formfield wrapper with the daterangepicker input component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guide","titleNoSpaces":"daterangepickerfield","descriptionNoSpaces":"thispatterncomponentintegratesthedaterangepickerwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfielddaterangepickerdaterangepickerfield","titleWords":["date","range","picker","field"],"descriptionWords":["this","pattern","component","integrates","the","daterangepicker","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","daterangepicker","daterangepickerfield"]}},{"id":"Patterns-Fields","title":"Fields","description":"Field pattern components that integrate inputs within FormField for consistent form layouts","tags":["patterns","fields","forms"],"route":"patterns/fields","menu":["Patterns","Fields"],"content":"Fields\n\nField pattern components provide a consistent way to integrate input components within FormField wrappers. These patterns simplify form building by combining labels, descriptions, validation, and error handling into a single, opinionated API.\n\nWhen to use field patterns\n\nField patterns are ideal for:\n- Building standard forms with consistent field layouts\n- Reducing boilerplate in form code\n- Ensuring accessibility best practices across all form fields\n- Integrating with form libraries l","_lower":{"title":"fields","description":"field pattern components that integrate inputs within formfield for consistent form layouts","tags":"patterns fields forms","content":"fields\n\nfield pattern components provide a consistent way to integrate input components within formfield wrappers. these patterns simplify form building by combining labels, descriptions, validation, and error handling into a single, opinionated api.\n\nwhen to use field patterns\n\nfield patterns are ideal for:\n- building standard forms with consistent field layouts\n- reducing boilerplate in form code\n- ensuring accessibility best practices across all form fields\n- integrating with form libraries l","combined":"fields field pattern components that integrate inputs within formfield for consistent form layouts patterns fields forms fields\n\nfield pattern components provide a consistent way to integrate input components within formfield wrappers. these patterns simplify form building by combining labels, descriptions, validation, and error handling into a single, opinionated api.\n\nwhen to use field patterns\n\nfield patterns are ideal for:\n- building standard forms with consistent field layouts\n- reducing boilerplate in form code\n- ensuring accessibility best practices across all form fields\n- integrating with form libraries l","titleNoSpaces":"fields","descriptionNoSpaces":"fieldpatterncomponentsthatintegrateinputswithinformfieldforconsistentformlayouts","tagsNoSpaces":"patternsfieldsforms","titleWords":["fields"],"descriptionWords":["field","pattern","components","that","integrate","inputs","within","formfield","for","consistent","form","layouts"],"tagsWords":["patterns","fields","forms"]}},{"id":"Patterns-MoneyInputField","title":"Money input field","exportName":"MoneyInputField","description":"This pattern component integrates the MoneyInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","MoneyInput","MoneyInputField"],"route":"patterns/fields/money-input-field","menu":["Patterns","Fields","Money input field"],"content":"Overview\n\nMoneyInputField is a pattern component that combines the FormField wrapper with the MoneyInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nThe component contains two focusable inputs: a currency selector and an amount input field, providing an intuitive interface for mon","_lower":{"title":"money input field","description":"this pattern component integrates the moneyinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field moneyinput moneyinputfield","content":"overview\n\nmoneyinputfield is a pattern component that combines the formfield wrapper with the moneyinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component contains two focusable inputs: a currency selector and an amount input field, providing an intuitive interface for mon","combined":"money input field this pattern component integrates the moneyinput within a formfield using a simple, consistent, and opinionated api. component pattern field moneyinput moneyinputfield overview\n\nmoneyinputfield is a pattern component that combines the formfield wrapper with the moneyinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component contains two focusable inputs: a currency selector and an amount input field, providing an intuitive interface for mon","titleNoSpaces":"moneyinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthemoneyinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldmoneyinputmoneyinputfield","titleWords":["money","input","field"],"descriptionWords":["this","pattern","component","integrates","the","moneyinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","moneyinput","moneyinputfield"]}},{"id":"Patterns-MultilineTextInputField","title":"Multiline text input field","exportName":"MultilineTextInputField","description":"This pattern component integrates the MultilineTextInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","MultilineTextInput","MultilineTextInputField"],"route":"patterns/fields/multiline-text-input-field","menu":["Patterns","Fields","Multiline text input field"],"content":"Overview\n\nMultilineTextInputField is a pattern component that combines the FormField wrapper with the MultilineTextInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nResources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guide","_lower":{"title":"multiline text input field","description":"this pattern component integrates the multilinetextinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field multilinetextinput multilinetextinputfield","content":"overview\n\nmultilinetextinputfield is a pattern component that combines the formfield wrapper with the multilinetextinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guide","combined":"multiline text input field this pattern component integrates the multilinetextinput within a formfield using a simple, consistent, and opinionated api. component pattern field multilinetextinput multilinetextinputfield overview\n\nmultilinetextinputfield is a pattern component that combines the formfield wrapper with the multilinetextinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guide","titleNoSpaces":"multilinetextinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthemultilinetextinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldmultilinetextinputmultilinetextinputfield","titleWords":["multiline","text","input","field"],"descriptionWords":["this","pattern","component","integrates","the","multilinetextinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","multilinetextinput","multilinetextinputfield"]}},{"id":"Patterns-NumberInputField","title":"Number input field","exportName":"NumberInputField","description":"This pattern component integrates the NumberInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","NumberInput","NumberInputField"],"route":"patterns/fields/number-input-field","menu":["Patterns","Fields","Number input field"],"content":"Overview\n\nNumberInputField is a pattern component that combines the FormField wrapper with the NumberInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nThe component features increment and decrement buttons, keyboard navigation, locale-aware number formatting, and supports min/max ","_lower":{"title":"number input field","description":"this pattern component integrates the numberinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field numberinput numberinputfield","content":"overview\n\nnumberinputfield is a pattern component that combines the formfield wrapper with the numberinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component features increment and decrement buttons, keyboard navigation, locale-aware number formatting, and supports min/max ","combined":"number input field this pattern component integrates the numberinput within a formfield using a simple, consistent, and opinionated api. component pattern field numberinput numberinputfield overview\n\nnumberinputfield is a pattern component that combines the formfield wrapper with the numberinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component features increment and decrement buttons, keyboard navigation, locale-aware number formatting, and supports min/max ","titleNoSpaces":"numberinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthenumberinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldnumberinputnumberinputfield","titleWords":["number","input","field"],"descriptionWords":["this","pattern","component","integrates","the","numberinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","numberinput","numberinputfield"]}},{"id":"Patterns-PasswordInputField","title":"Password input field","exportName":"PasswordInputField","description":"This pattern component integrates the PasswordInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","PasswordInput","PasswordInputField"],"route":"patterns/fields/password-input-field","menu":["Patterns","Fields","Password input field"],"content":"Overview\n\nPasswordInputField is a pattern component that combines the FormField wrapper with the PasswordInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nIt maintains all functionality of the underlying PasswordInput, including the visibility toggle.\n\nResources\n\nFor detailed guid","_lower":{"title":"password input field","description":"this pattern component integrates the passwordinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field passwordinput passwordinputfield","content":"overview\n\npasswordinputfield is a pattern component that combines the formfield wrapper with the passwordinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nit maintains all functionality of the underlying passwordinput, including the visibility toggle.\n\nresources\n\nfor detailed guid","combined":"password input field this pattern component integrates the passwordinput within a formfield using a simple, consistent, and opinionated api. component pattern field passwordinput passwordinputfield overview\n\npasswordinputfield is a pattern component that combines the formfield wrapper with the passwordinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nit maintains all functionality of the underlying passwordinput, including the visibility toggle.\n\nresources\n\nfor detailed guid","titleNoSpaces":"passwordinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthepasswordinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldpasswordinputpasswordinputfield","titleWords":["password","input","field"],"descriptionWords":["this","pattern","component","integrates","the","passwordinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","passwordinput","passwordinputfield"]}},{"id":"Patterns-SearchInputField","title":"Search input field","exportName":"SearchInputField","description":"This pattern component integrates the SearchInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","SearchInput","SearchInputField"],"route":"patterns/fields/search-input-field","menu":["Patterns","Fields","Search input field"],"content":"Overview\n\nSearchInputField is a pattern component that combines the FormField wrapper with the SearchInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nThe component features a built-in search icon, a clear button that appears when text is entered, keyboard shortcuts (Escape to cle","_lower":{"title":"search input field","description":"this pattern component integrates the searchinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field searchinput searchinputfield","content":"overview\n\nsearchinputfield is a pattern component that combines the formfield wrapper with the searchinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component features a built-in search icon, a clear button that appears when text is entered, keyboard shortcuts (escape to cle","combined":"search input field this pattern component integrates the searchinput within a formfield using a simple, consistent, and opinionated api. component pattern field searchinput searchinputfield overview\n\nsearchinputfield is a pattern component that combines the formfield wrapper with the searchinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component features a built-in search icon, a clear button that appears when text is entered, keyboard shortcuts (escape to cle","titleNoSpaces":"searchinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthesearchinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldsearchinputsearchinputfield","titleWords":["search","input","field"],"descriptionWords":["this","pattern","component","integrates","the","searchinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","searchinput","searchinputfield"]}},{"id":"Patterns-TextInputField","title":"Text input field","exportName":"TextInputField","description":"This pattern component integrates the TextInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","TextInput","TextInputField"],"route":"patterns/fields/text-input-field","menu":["Patterns","Fields","Text input field"],"content":"Overview\n\nTextInputField is a pattern component that combines the FormField wrapper with the TextInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nResources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- TextInpu","_lower":{"title":"text input field","description":"this pattern component integrates the textinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field textinput textinputfield","content":"overview\n\ntextinputfield is a pattern component that combines the formfield wrapper with the textinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- textinpu","combined":"text input field this pattern component integrates the textinput within a formfield using a simple, consistent, and opinionated api. component pattern field textinput textinputfield overview\n\ntextinputfield is a pattern component that combines the formfield wrapper with the textinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- textinpu","titleNoSpaces":"textinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthetextinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldtextinputtextinputfield","titleWords":["text","input","field"],"descriptionWords":["this","pattern","component","integrates","the","textinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","textinput","textinputfield"]}},{"id":"Spacing","title":"Spacing","description":"Spacing tokens are used to define the space between elements.","tags":["space","spacing"],"route":"home/design-tokens/spacing","menu":["Home","Design Tokens","Spacing"],"content":"Spacing Tokens\n\nSpacing tokens are used to define the space between elements. They are used to\ncreate consistent spacing between elements and to ensure that the layout is\nvisually balanced.\n\n> [!NOTE]  \n> Every token has a negative equivalent, in case you need to apply a negative\n> margin etc. Access the negative version by prependind the token name with a\n> dash. e.g. -100, -400, -1000, etc.\n\n<br />\n\n<SpacingTokenDemo />\n\n<br />\n\n> [!TIP]  \n> To quickly calculate the token value in px, take the","_lower":{"title":"spacing","description":"spacing tokens are used to define the space between elements.","tags":"space spacing","content":"spacing tokens\n\nspacing tokens are used to define the space between elements. they are used to\ncreate consistent spacing between elements and to ensure that the layout is\nvisually balanced.\n\n> [!note]  \n> every token has a negative equivalent, in case you need to apply a negative\n> margin etc. access the negative version by prependind the token name with a\n> dash. e.g. -100, -400, -1000, etc.\n\n<br />\n\n<spacingtokendemo />\n\n<br />\n\n> [!tip]  \n> to quickly calculate the token value in px, take the","combined":"spacing spacing tokens are used to define the space between elements. space spacing spacing tokens\n\nspacing tokens are used to define the space between elements. they are used to\ncreate consistent spacing between elements and to ensure that the layout is\nvisually balanced.\n\n> [!note]  \n> every token has a negative equivalent, in case you need to apply a negative\n> margin etc. access the negative version by prependind the token name with a\n> dash. e.g. -100, -400, -1000, etc.\n\n<br />\n\n<spacingtokendemo />\n\n<br />\n\n> [!tip]  \n> to quickly calculate the token value in px, take the","titleNoSpaces":"spacing","descriptionNoSpaces":"spacingtokensareusedtodefinethespacebetweenelements.","tagsNoSpaces":"spacespacing","titleWords":["spacing"],"descriptionWords":["spacing","tokens","are","used","to","define","the","space","between","elements."],"tagsWords":["space","spacing"]}},{"id":"Style Props-Background","title":"Background","description":"JSX style props for styling background colors, gradients, and images.","tags":["document"],"route":"home/style-props/background","menu":["Home","Style Props","Background"],"content":"Background\n\nJSX style props for styling background colors, gradients, and images.\n\nBackground Attachment\n\nUse bgAttachment to control the attachment of a background image.\n\n``jsx\n<Box bgAttachment=\"fixed\" bgImage=\"url(...)\" />\n`\n\n| Prop                                   | CSS Property            | Token Category |\n| -------------------------------------- | ----------------------- | -------------- |\n| bgAttachment, backgroundAttachment | background-attachment | -              |\n\nBackground Blend ","_lower":{"title":"background","description":"jsx style props for styling background colors, gradients, and images.","tags":"document","content":"background\n\njsx style props for styling background colors, gradients, and images.\n\nbackground attachment\n\nuse bgattachment to control the attachment of a background image.\n\n``jsx\n<box bgattachment=\"fixed\" bgimage=\"url(...)\" />\n`\n\n| prop                                   | css property            | token category |\n| -------------------------------------- | ----------------------- | -------------- |\n| bgattachment, backgroundattachment | background-attachment | -              |\n\nbackground blend ","combined":"background jsx style props for styling background colors, gradients, and images. document background\n\njsx style props for styling background colors, gradients, and images.\n\nbackground attachment\n\nuse bgattachment to control the attachment of a background image.\n\n``jsx\n<box bgattachment=\"fixed\" bgimage=\"url(...)\" />\n`\n\n| prop                                   | css property            | token category |\n| -------------------------------------- | ----------------------- | -------------- |\n| bgattachment, backgroundattachment | background-attachment | -              |\n\nbackground blend ","titleNoSpaces":"background","descriptionNoSpaces":"jsxstylepropsforstylingbackgroundcolors,gradients,andimages.","tagsNoSpaces":"document","titleWords":["background"],"descriptionWords":["jsx","style","props","for","styling","background","colors,","gradients,","and","images."],"tagsWords":["document"]}},{"id":"Style Props-Border","title":"Border","description":"JSX style props for styling border and border radius.","tags":["document"],"route":"home/style-props/border","menu":["Home","Style Props","Border"],"content":"Border\n\nJSX style props for styling border and border radius.\n\nBorder Radius\n\nAll sides\n\nUse the rounded or borderRadius props to apply border radius on all sides of\nan element.\n\n``jsx\n<Box borderRadius=\"400\" />\n<Box rounded=\"400\" /> // shorthand\n`\n\n| Prop                      | CSS Property    | Token Category |\n| ------------------------- | --------------- | -------------- |\n| rounded, borderRadius | border-radius | radii        |\n\nSpecific sides\n\nUse the rounded{Left,Right,Top,Bottom} or\nbord","_lower":{"title":"border","description":"jsx style props for styling border and border radius.","tags":"document","content":"border\n\njsx style props for styling border and border radius.\n\nborder radius\n\nall sides\n\nuse the rounded or borderradius props to apply border radius on all sides of\nan element.\n\n``jsx\n<box borderradius=\"400\" />\n<box rounded=\"400\" /> // shorthand\n`\n\n| prop                      | css property    | token category |\n| ------------------------- | --------------- | -------------- |\n| rounded, borderradius | border-radius | radii        |\n\nspecific sides\n\nuse the rounded{left,right,top,bottom} or\nbord","combined":"border jsx style props for styling border and border radius. document border\n\njsx style props for styling border and border radius.\n\nborder radius\n\nall sides\n\nuse the rounded or borderradius props to apply border radius on all sides of\nan element.\n\n``jsx\n<box borderradius=\"400\" />\n<box rounded=\"400\" /> // shorthand\n`\n\n| prop                      | css property    | token category |\n| ------------------------- | --------------- | -------------- |\n| rounded, borderradius | border-radius | radii        |\n\nspecific sides\n\nuse the rounded{left,right,top,bottom} or\nbord","titleNoSpaces":"border","descriptionNoSpaces":"jsxstylepropsforstylingborderandborderradius.","tagsNoSpaces":"document","titleWords":["border"],"descriptionWords":["jsx","style","props","for","styling","border","and","border","radius."],"tagsWords":["document"]}},{"id":"Style Props-Display","title":"Display","description":"Style props for styling display of an element.","tags":["document"],"route":"home/style-props/display","menu":["Home","Style Props","Display"],"content":"Display\n\nStyle props for styling display of an element.\n\nDisplay Property\n\n``jsx\n<Box display=\"flex\" />\n\n// responsive\n<Box display={{ base: \"none\", md: \"block\" }} />\n`\n\n| Prop      | CSS Property | Token Category |\n| --------- | ------------ | -------------- |\n| display | display    | -              |\n\nHiding Elements\n\nHide From\n\nUse the hideFrom prop to hide an element from a specific breakpoint.\n\n`jsx\n<Box display=\"flex\" hideFrom=\"md\" />\n`\n\n| Prop       | CSS Property | Token Category |\n| ---","_lower":{"title":"display","description":"style props for styling display of an element.","tags":"document","content":"display\n\nstyle props for styling display of an element.\n\ndisplay property\n\n``jsx\n<box display=\"flex\" />\n\n// responsive\n<box display={{ base: \"none\", md: \"block\" }} />\n`\n\n| prop      | css property | token category |\n| --------- | ------------ | -------------- |\n| display | display    | -              |\n\nhiding elements\n\nhide from\n\nuse the hidefrom prop to hide an element from a specific breakpoint.\n\n`jsx\n<box display=\"flex\" hidefrom=\"md\" />\n`\n\n| prop       | css property | token category |\n| ---","combined":"display style props for styling display of an element. document display\n\nstyle props for styling display of an element.\n\ndisplay property\n\n``jsx\n<box display=\"flex\" />\n\n// responsive\n<box display={{ base: \"none\", md: \"block\" }} />\n`\n\n| prop      | css property | token category |\n| --------- | ------------ | -------------- |\n| display | display    | -              |\n\nhiding elements\n\nhide from\n\nuse the hidefrom prop to hide an element from a specific breakpoint.\n\n`jsx\n<box display=\"flex\" hidefrom=\"md\" />\n`\n\n| prop       | css property | token category |\n| ---","titleNoSpaces":"display","descriptionNoSpaces":"stylepropsforstylingdisplayofanelement.","tagsNoSpaces":"document","titleWords":["display"],"descriptionWords":["style","props","for","styling","display","of","an","element."],"tagsWords":["document"]}},{"id":"Style Props-Effects","title":"Effects","description":"JSX style props for styling box shadows, opacity, and more","tags":["document"],"route":"home/style-props/effects","menu":["Home","Style Props","Effects"],"content":"Effects\n\nJSX style props for styling box shadows, opacity, and more\n\nBox Shadow\n\nUse the shadow or boxShadow prop to apply a box shadow to an element.\n\n``jsx\n// hardcoded values\n<Box shadow=\"12px 12px 2px 1px rgba(0, 0, 255, .2)\" />\n\n// token values\n<Box shadow=\"lg\" />\n`\n\n| Prop                   | CSS Property     | Token Category |\n| ---------------------- | ---------------- | -------------- |\n| shadows, boxShadow | box-shadow     | shadows      |\n| shadowColor          | --shadow-color | colo","_lower":{"title":"effects","description":"jsx style props for styling box shadows, opacity, and more","tags":"document","content":"effects\n\njsx style props for styling box shadows, opacity, and more\n\nbox shadow\n\nuse the shadow or boxshadow prop to apply a box shadow to an element.\n\n``jsx\n// hardcoded values\n<box shadow=\"12px 12px 2px 1px rgba(0, 0, 255, .2)\" />\n\n// token values\n<box shadow=\"lg\" />\n`\n\n| prop                   | css property     | token category |\n| ---------------------- | ---------------- | -------------- |\n| shadows, boxshadow | box-shadow     | shadows      |\n| shadowcolor          | --shadow-color | colo","combined":"effects jsx style props for styling box shadows, opacity, and more document effects\n\njsx style props for styling box shadows, opacity, and more\n\nbox shadow\n\nuse the shadow or boxshadow prop to apply a box shadow to an element.\n\n``jsx\n// hardcoded values\n<box shadow=\"12px 12px 2px 1px rgba(0, 0, 255, .2)\" />\n\n// token values\n<box shadow=\"lg\" />\n`\n\n| prop                   | css property     | token category |\n| ---------------------- | ---------------- | -------------- |\n| shadows, boxshadow | box-shadow     | shadows      |\n| shadowcolor          | --shadow-color | colo","titleNoSpaces":"effects","descriptionNoSpaces":"jsxstylepropsforstylingboxshadows,opacity,andmore","tagsNoSpaces":"document","titleWords":["effects"],"descriptionWords":["jsx","style","props","for","styling","box","shadows,","opacity,","and","more"],"tagsWords":["document"]}},{"id":"Style Props-Filters","title":"Filters","description":"JSX style props for applying various filters to elements.","tags":["document"],"route":"home/style-props/filters","menu":["Home","Style Props","Filters"],"content":"Filters\n\nJSX style props for applying various filters to elements.\n\nFilter\n\nUse the filter prop to apply visual effects like blur or color shift to an\nelement.\n\n``jsx\n<Box filter=\"blur(5px)\" />\n<Box filter=\"grayscale(80%)\" />\n`\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| filter | filter     | -              |\n\nBlur\n\nUse the blur prop to apply a blur effect to an element. The requirement for\nthis prop is to set the filter prop to auto.\n\n`jsx\n// har","_lower":{"title":"filters","description":"jsx style props for applying various filters to elements.","tags":"document","content":"filters\n\njsx style props for applying various filters to elements.\n\nfilter\n\nuse the filter prop to apply visual effects like blur or color shift to an\nelement.\n\n``jsx\n<box filter=\"blur(5px)\" />\n<box filter=\"grayscale(80%)\" />\n`\n\n| prop     | css property | token category |\n| -------- | ------------ | -------------- |\n| filter | filter     | -              |\n\nblur\n\nuse the blur prop to apply a blur effect to an element. the requirement for\nthis prop is to set the filter prop to auto.\n\n`jsx\n// har","combined":"filters jsx style props for applying various filters to elements. document filters\n\njsx style props for applying various filters to elements.\n\nfilter\n\nuse the filter prop to apply visual effects like blur or color shift to an\nelement.\n\n``jsx\n<box filter=\"blur(5px)\" />\n<box filter=\"grayscale(80%)\" />\n`\n\n| prop     | css property | token category |\n| -------- | ------------ | -------------- |\n| filter | filter     | -              |\n\nblur\n\nuse the blur prop to apply a blur effect to an element. the requirement for\nthis prop is to set the filter prop to auto.\n\n`jsx\n// har","titleNoSpaces":"filters","descriptionNoSpaces":"jsxstylepropsforapplyingvariousfilterstoelements.","tagsNoSpaces":"document","titleWords":["filters"],"descriptionWords":["jsx","style","props","for","applying","various","filters","to","elements."],"tagsWords":["document"]}},{"id":"Style Props-Flex and Grid","title":"Flex and Grid","description":"JSX style props to control flex and grid layouts","tags":["document"],"route":"home/style-props/flex-and-grid","menu":["Home","Style Props","Flex and Grid"],"content":"Flex and Grid\n\nJSX style props to control flex and grid layouts\n\nFlex Basis\n\nUse the flexBasis prop to set the initial main size of a flex item.\n\n``jsx\n<Flex>\n  <Box flexBasis=\"25%\" />\n  <Box flexBasis=\"25%\" />\n  <Box flexBasis=\"50%\" />\n</Flex>\n`\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| flexBasis | flex-basis | -              |\n\nFlex Direction\n\nUse the flexDir or flexDirection prop to set the direction of the main axis\nin a flex container","_lower":{"title":"flex and grid","description":"jsx style props to control flex and grid layouts","tags":"document","content":"flex and grid\n\njsx style props to control flex and grid layouts\n\nflex basis\n\nuse the flexbasis prop to set the initial main size of a flex item.\n\n``jsx\n<flex>\n  <box flexbasis=\"25%\" />\n  <box flexbasis=\"25%\" />\n  <box flexbasis=\"50%\" />\n</flex>\n`\n\n| prop        | css property | token category |\n| ----------- | ------------ | -------------- |\n| flexbasis | flex-basis | -              |\n\nflex direction\n\nuse the flexdir or flexdirection prop to set the direction of the main axis\nin a flex container","combined":"flex and grid jsx style props to control flex and grid layouts document flex and grid\n\njsx style props to control flex and grid layouts\n\nflex basis\n\nuse the flexbasis prop to set the initial main size of a flex item.\n\n``jsx\n<flex>\n  <box flexbasis=\"25%\" />\n  <box flexbasis=\"25%\" />\n  <box flexbasis=\"50%\" />\n</flex>\n`\n\n| prop        | css property | token category |\n| ----------- | ------------ | -------------- |\n| flexbasis | flex-basis | -              |\n\nflex direction\n\nuse the flexdir or flexdirection prop to set the direction of the main axis\nin a flex container","titleNoSpaces":"flexandgrid","descriptionNoSpaces":"jsxstylepropstocontrolflexandgridlayouts","tagsNoSpaces":"document","titleWords":["flex","and","grid"],"descriptionWords":["jsx","style","props","to","control","flex","and","grid","layouts"],"tagsWords":["document"]}},{"id":"Style Props-Interactivity","title":"Interactivity","description":"JSX style props to enhance interactivity on an element","tags":["document"],"route":"home/style-props/interactivity","menu":["Home","Style Props","Interactivity"],"content":"Interactivity\n\nJSX style props to enhance interactivity on an element\n\nAccent Color\n\nUse the accentColor prop to set the accent color for browser generated\nuser-interface controls.\n\n``jsx\n// hardcoded\n<label>\n  <chakra.input type=\"checkbox\" accentColor=\"#3b82f6\" />\n</label>\n\n// token value\n<label>\n  <chakra.input type=\"checkbox\" accentColor=\"blue.500\" />\n</label>\n`\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| accentColor | accent-colo","_lower":{"title":"interactivity","description":"jsx style props to enhance interactivity on an element","tags":"document","content":"interactivity\n\njsx style props to enhance interactivity on an element\n\naccent color\n\nuse the accentcolor prop to set the accent color for browser generated\nuser-interface controls.\n\n``jsx\n// hardcoded\n<label>\n  <chakra.input type=\"checkbox\" accentcolor=\"#3b82f6\" />\n</label>\n\n// token value\n<label>\n  <chakra.input type=\"checkbox\" accentcolor=\"blue.500\" />\n</label>\n`\n\n| prop          | css property   | token category |\n| ------------- | -------------- | -------------- |\n| accentcolor | accent-colo","combined":"interactivity jsx style props to enhance interactivity on an element document interactivity\n\njsx style props to enhance interactivity on an element\n\naccent color\n\nuse the accentcolor prop to set the accent color for browser generated\nuser-interface controls.\n\n``jsx\n// hardcoded\n<label>\n  <chakra.input type=\"checkbox\" accentcolor=\"#3b82f6\" />\n</label>\n\n// token value\n<label>\n  <chakra.input type=\"checkbox\" accentcolor=\"blue.500\" />\n</label>\n`\n\n| prop          | css property   | token category |\n| ------------- | -------------- | -------------- |\n| accentcolor | accent-colo","titleNoSpaces":"interactivity","descriptionNoSpaces":"jsxstylepropstoenhanceinteractivityonanelement","tagsNoSpaces":"document","titleWords":["interactivity"],"descriptionWords":["jsx","style","props","to","enhance","interactivity","on","an","element"],"tagsWords":["document"]}},{"id":"Style Props-Layout","title":"Layout","description":"JSX style props to control the width, height, and spacing of elements","tags":["document"],"route":"home/style-props/layout","menu":["Home","Style Props","Layout"],"content":"Layout\n\nJSX style props to control the width, height, and spacing of elements\n\nAspect Ratio\n\nUse the aspectRatio prop to set the desired aspect ratio of an element.\n\n``jsx\n// raw value\n<Box aspectRatio=\"1.2\" />\n\n// token\n<Box aspectRatio=\"square\" />\n`\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| aspectRatio | aspect-ratio | aspectRatios |\n\nBreak\n\nBreak After\n\nUse the breakAfter prop to set how page, column, or region breaks should\nbeh","_lower":{"title":"layout","description":"jsx style props to control the width, height, and spacing of elements","tags":"document","content":"layout\n\njsx style props to control the width, height, and spacing of elements\n\naspect ratio\n\nuse the aspectratio prop to set the desired aspect ratio of an element.\n\n``jsx\n// raw value\n<box aspectratio=\"1.2\" />\n\n// token\n<box aspectratio=\"square\" />\n`\n\n| prop          | css property   | token category |\n| ------------- | -------------- | -------------- |\n| aspectratio | aspect-ratio | aspectratios |\n\nbreak\n\nbreak after\n\nuse the breakafter prop to set how page, column, or region breaks should\nbeh","combined":"layout jsx style props to control the width, height, and spacing of elements document layout\n\njsx style props to control the width, height, and spacing of elements\n\naspect ratio\n\nuse the aspectratio prop to set the desired aspect ratio of an element.\n\n``jsx\n// raw value\n<box aspectratio=\"1.2\" />\n\n// token\n<box aspectratio=\"square\" />\n`\n\n| prop          | css property   | token category |\n| ------------- | -------------- | -------------- |\n| aspectratio | aspect-ratio | aspectratios |\n\nbreak\n\nbreak after\n\nuse the breakafter prop to set how page, column, or region breaks should\nbeh","titleNoSpaces":"layout","descriptionNoSpaces":"jsxstylepropstocontrolthewidth,height,andspacingofelements","tagsNoSpaces":"document","titleWords":["layout"],"descriptionWords":["jsx","style","props","to","control","the","width,","height,","and","spacing","of","elements"],"tagsWords":["document"]}},{"id":"Style Props-List","title":"List","description":"JSX style props for customizing list styles.","tags":["document"],"route":"home/style-props/list","menu":["Home","Style Props","List"],"content":"List\n\nJSX style props for customizing list styles.\n\nList Style Type\n\nUse the listStyleType property to set the type of the list marker.\n\n``jsx\n<Box as=\"ul\" listStyleType=\"circle\">\n  <li>Item 1</li>\n  <li>Item 2</li>\n  <li>Item 3</li>\n</Box>\n`\n\n| Prop            | CSS Property      | Token Category |\n| --------------- | ----------------- | -------------- |\n| listStyleType | list-style-type | -              |\n\nList Style Position\n\nUse the listStylePosition property to set the position of the list ","_lower":{"title":"list","description":"jsx style props for customizing list styles.","tags":"document","content":"list\n\njsx style props for customizing list styles.\n\nlist style type\n\nuse the liststyletype property to set the type of the list marker.\n\n``jsx\n<box as=\"ul\" liststyletype=\"circle\">\n  <li>item 1</li>\n  <li>item 2</li>\n  <li>item 3</li>\n</box>\n`\n\n| prop            | css property      | token category |\n| --------------- | ----------------- | -------------- |\n| liststyletype | list-style-type | -              |\n\nlist style position\n\nuse the liststyleposition property to set the position of the list ","combined":"list jsx style props for customizing list styles. document list\n\njsx style props for customizing list styles.\n\nlist style type\n\nuse the liststyletype property to set the type of the list marker.\n\n``jsx\n<box as=\"ul\" liststyletype=\"circle\">\n  <li>item 1</li>\n  <li>item 2</li>\n  <li>item 3</li>\n</box>\n`\n\n| prop            | css property      | token category |\n| --------------- | ----------------- | -------------- |\n| liststyletype | list-style-type | -              |\n\nlist style position\n\nuse the liststyleposition property to set the position of the list ","titleNoSpaces":"list","descriptionNoSpaces":"jsxstylepropsforcustomizingliststyles.","tagsNoSpaces":"document","titleWords":["list"],"descriptionWords":["jsx","style","props","for","customizing","list","styles."],"tagsWords":["document"]}},{"id":"Style Props-Sizing","title":"Sizing","description":"JSX style props for sizing an element","tags":["document"],"route":"home/style-props/sizing","menu":["Home","Style Props","Sizing"],"content":"Sizing\n\nJSX style props for sizing an element\n\nWidth\n\nUse the width or w property to set the width of an element.\n\n``jsx\n// hardcoded values\n<Box width=\"64px\" />\n<Box w=\"4rem\" />\n\n// token values\n<Box width=\"5\" />\n<Box w=\"5\" />\n`\n\nFractional width\n\nUse can set fractional widths using the width or w property.\n\nValues can be within the following ranges:\n\n- Thirds: 1/3 to 2/3\n- Fourths: 1/4 to 3/4\n- Fifths: 1/5 to 4/5\n- Sixths: 1/6 to 5/6\n- Twelfths: 1/12 to 11/12\n\n`jsx\n// half width\n<Flex>\n  <Box ","_lower":{"title":"sizing","description":"jsx style props for sizing an element","tags":"document","content":"sizing\n\njsx style props for sizing an element\n\nwidth\n\nuse the width or w property to set the width of an element.\n\n``jsx\n// hardcoded values\n<box width=\"64px\" />\n<box w=\"4rem\" />\n\n// token values\n<box width=\"5\" />\n<box w=\"5\" />\n`\n\nfractional width\n\nuse can set fractional widths using the width or w property.\n\nvalues can be within the following ranges:\n\n- thirds: 1/3 to 2/3\n- fourths: 1/4 to 3/4\n- fifths: 1/5 to 4/5\n- sixths: 1/6 to 5/6\n- twelfths: 1/12 to 11/12\n\n`jsx\n// half width\n<flex>\n  <box ","combined":"sizing jsx style props for sizing an element document sizing\n\njsx style props for sizing an element\n\nwidth\n\nuse the width or w property to set the width of an element.\n\n``jsx\n// hardcoded values\n<box width=\"64px\" />\n<box w=\"4rem\" />\n\n// token values\n<box width=\"5\" />\n<box w=\"5\" />\n`\n\nfractional width\n\nuse can set fractional widths using the width or w property.\n\nvalues can be within the following ranges:\n\n- thirds: 1/3 to 2/3\n- fourths: 1/4 to 3/4\n- fifths: 1/5 to 4/5\n- sixths: 1/6 to 5/6\n- twelfths: 1/12 to 11/12\n\n`jsx\n// half width\n<flex>\n  <box ","titleNoSpaces":"sizing","descriptionNoSpaces":"jsxstylepropsforsizinganelement","tagsNoSpaces":"document","titleWords":["sizing"],"descriptionWords":["jsx","style","props","for","sizing","an","element"],"tagsWords":["document"]}},{"id":"Style Props-Spacing","title":"Spacing","description":"JSX style props for controlling the padding and margin of an element.","tags":["document"],"route":"home/style-props/spacing","menu":["Home","Style Props","Spacing"],"content":"Spacing\n\nJSX style props for controlling the padding and margin of an element.\n\nPadding\n\nAll sides\n\nUse the padding prop to apply padding on all sides of an element\n\n``jsx\n// raw value\n<Box padding=\"40px\" />\n<Box p=\"40px\" /> // shorthand\n\n// token value\n<Box padding=\"4\" />\n<Box p=\"4\" /> // shorthand\n`\n\n| Prop          | CSS Property | Token Category |\n| ------------- | ------------ | -------------- |\n| p,padding | padding    | spacing      |\n\nSpecific side\n\nUse the padding{Left,Right,Top,Bottom}","_lower":{"title":"spacing","description":"jsx style props for controlling the padding and margin of an element.","tags":"document","content":"spacing\n\njsx style props for controlling the padding and margin of an element.\n\npadding\n\nall sides\n\nuse the padding prop to apply padding on all sides of an element\n\n``jsx\n// raw value\n<box padding=\"40px\" />\n<box p=\"40px\" /> // shorthand\n\n// token value\n<box padding=\"4\" />\n<box p=\"4\" /> // shorthand\n`\n\n| prop          | css property | token category |\n| ------------- | ------------ | -------------- |\n| p,padding | padding    | spacing      |\n\nspecific side\n\nuse the padding{left,right,top,bottom}","combined":"spacing jsx style props for controlling the padding and margin of an element. document spacing\n\njsx style props for controlling the padding and margin of an element.\n\npadding\n\nall sides\n\nuse the padding prop to apply padding on all sides of an element\n\n``jsx\n// raw value\n<box padding=\"40px\" />\n<box p=\"40px\" /> // shorthand\n\n// token value\n<box padding=\"4\" />\n<box p=\"4\" /> // shorthand\n`\n\n| prop          | css property | token category |\n| ------------- | ------------ | -------------- |\n| p,padding | padding    | spacing      |\n\nspecific side\n\nuse the padding{left,right,top,bottom}","titleNoSpaces":"spacing","descriptionNoSpaces":"jsxstylepropsforcontrollingthepaddingandmarginofanelement.","tagsNoSpaces":"document","titleWords":["spacing"],"descriptionWords":["jsx","style","props","for","controlling","the","padding","and","margin","of","an","element."],"tagsWords":["document"]}},{"id":"Style Props-SVG","title":"SVG","description":"JSX style props for SVG elements.","tags":["document"],"route":"home/style-props/svg","menu":["Home","Style Props","SVG"],"content":"SVG\n\nJSX style props for SVG elements.\n\nFill\n\nUse the fill prop to set the fill color of an SVG element.\n\n``jsx\n<chakra.svg fill=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| Prop   | CSS Property | Token Category |\n| ------ | ------------ | -------------- |\n| fill | fill       | colors       |\n\nStroke\n\nUse the stroke prop to set the stroke color of an SVG element.\n\n`jsx\n<chakra.svg stroke=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| Prop     | CSS Property | Token Category |\n| --------","_lower":{"title":"svg","description":"jsx style props for svg elements.","tags":"document","content":"svg\n\njsx style props for svg elements.\n\nfill\n\nuse the fill prop to set the fill color of an svg element.\n\n``jsx\n<chakra.svg fill=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| prop   | css property | token category |\n| ------ | ------------ | -------------- |\n| fill | fill       | colors       |\n\nstroke\n\nuse the stroke prop to set the stroke color of an svg element.\n\n`jsx\n<chakra.svg stroke=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| prop     | css property | token category |\n| --------","combined":"svg jsx style props for svg elements. document svg\n\njsx style props for svg elements.\n\nfill\n\nuse the fill prop to set the fill color of an svg element.\n\n``jsx\n<chakra.svg fill=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| prop   | css property | token category |\n| ------ | ------------ | -------------- |\n| fill | fill       | colors       |\n\nstroke\n\nuse the stroke prop to set the stroke color of an svg element.\n\n`jsx\n<chakra.svg stroke=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| prop     | css property | token category |\n| --------","titleNoSpaces":"svg","descriptionNoSpaces":"jsxstylepropsforsvgelements.","tagsNoSpaces":"document","titleWords":["svg"],"descriptionWords":["jsx","style","props","for","svg","elements."],"tagsWords":["document"]}},{"id":"Style Props-Tables","title":"Tables","description":"JSX style props for styling table elements.","tags":["document"],"route":"home/style-props/tables","menu":["Home","Style Props","Tables"],"content":"Tables\n\nJSX style props for styling table elements.\n\nBorder Spacing\n\nControl the border-spacing property of a table.\n\n``jsx\n<chakra.table borderSpacing=\"2\">\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n`\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| borderSpacing | border-spacing | spacing      |\n\nBorder Spacing X\n\nUse the borderSpacingX prop to set the horizontal border-sp","_lower":{"title":"tables","description":"jsx style props for styling table elements.","tags":"document","content":"tables\n\njsx style props for styling table elements.\n\nborder spacing\n\ncontrol the border-spacing property of a table.\n\n``jsx\n<chakra.table borderspacing=\"2\">\n  <tbody>\n    <tr>\n      <td>cell 1</td>\n      <td>cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n`\n\n| prop            | css property     | token category |\n| --------------- | ---------------- | -------------- |\n| borderspacing | border-spacing | spacing      |\n\nborder spacing x\n\nuse the borderspacingx prop to set the horizontal border-sp","combined":"tables jsx style props for styling table elements. document tables\n\njsx style props for styling table elements.\n\nborder spacing\n\ncontrol the border-spacing property of a table.\n\n``jsx\n<chakra.table borderspacing=\"2\">\n  <tbody>\n    <tr>\n      <td>cell 1</td>\n      <td>cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n`\n\n| prop            | css property     | token category |\n| --------------- | ---------------- | -------------- |\n| borderspacing | border-spacing | spacing      |\n\nborder spacing x\n\nuse the borderspacingx prop to set the horizontal border-sp","titleNoSpaces":"tables","descriptionNoSpaces":"jsxstylepropsforstylingtableelements.","tagsNoSpaces":"document","titleWords":["tables"],"descriptionWords":["jsx","style","props","for","styling","table","elements."],"tagsWords":["document"]}},{"id":"Style Props-Transforms","title":"Transforms","description":"JSX style props for transforming elements.","tags":["document"],"route":"home/style-props/transforms","menu":["Home","Style Props","Transforms"],"content":"Transforms\n\nJSX style props for transforming elements.\n\nScale\n\nUse the scale prop to control the scale of an element.\n\n``jsx\n<Box scale=\"1.2\" />\n`\n\nWhen the scale prop is set to auto, the scaleX and scaleY props are used\nto control the scale of the element.\n\n| Prop    | CSS Property | Token Category |\n| ------- | ------------ | -------------- |\n| scale | scale      | -              |\n\nScale X\n\nUse the scaleX prop to control the scaleX property of an element. This\nrequires the scale prop to be se","_lower":{"title":"transforms","description":"jsx style props for transforming elements.","tags":"document","content":"transforms\n\njsx style props for transforming elements.\n\nscale\n\nuse the scale prop to control the scale of an element.\n\n``jsx\n<box scale=\"1.2\" />\n`\n\nwhen the scale prop is set to auto, the scalex and scaley props are used\nto control the scale of the element.\n\n| prop    | css property | token category |\n| ------- | ------------ | -------------- |\n| scale | scale      | -              |\n\nscale x\n\nuse the scalex prop to control the scalex property of an element. this\nrequires the scale prop to be se","combined":"transforms jsx style props for transforming elements. document transforms\n\njsx style props for transforming elements.\n\nscale\n\nuse the scale prop to control the scale of an element.\n\n``jsx\n<box scale=\"1.2\" />\n`\n\nwhen the scale prop is set to auto, the scalex and scaley props are used\nto control the scale of the element.\n\n| prop    | css property | token category |\n| ------- | ------------ | -------------- |\n| scale | scale      | -              |\n\nscale x\n\nuse the scalex prop to control the scalex property of an element. this\nrequires the scale prop to be se","titleNoSpaces":"transforms","descriptionNoSpaces":"jsxstylepropsfortransformingelements.","tagsNoSpaces":"document","titleWords":["transforms"],"descriptionWords":["jsx","style","props","for","transforming","elements."],"tagsWords":["document"]}},{"id":"Style Props-Transitions","title":"Transitions","description":"JSX style props for controlling an element's transition and animation.","tags":["document"],"route":"home/style-props/transitions","menu":["Home","Style Props","Transitions"],"content":"Transitions\n\nJSX style props for controlling an element's transition and animation.\n\nTransition\n\nUse the transition prop to control the transition of an element.\n\n``jsx\n// hardcoded value\n<Box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"background 0.2s ease-in-out\">\n  Hover me\n</Box>\n\n// shortcut value\n<Box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"backgrounds\">\n  Hover me\n</Box>\n`\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- ","_lower":{"title":"transitions","description":"jsx style props for controlling an element's transition and animation.","tags":"document","content":"transitions\n\njsx style props for controlling an element's transition and animation.\n\ntransition\n\nuse the transition prop to control the transition of an element.\n\n``jsx\n// hardcoded value\n<box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"background 0.2s ease-in-out\">\n  hover me\n</box>\n\n// shortcut value\n<box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"backgrounds\">\n  hover me\n</box>\n`\n\n| prop         | css property | token category |\n| ------------ | ------------ | -------------- ","combined":"transitions jsx style props for controlling an element's transition and animation. document transitions\n\njsx style props for controlling an element's transition and animation.\n\ntransition\n\nuse the transition prop to control the transition of an element.\n\n``jsx\n// hardcoded value\n<box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"background 0.2s ease-in-out\">\n  hover me\n</box>\n\n// shortcut value\n<box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"backgrounds\">\n  hover me\n</box>\n`\n\n| prop         | css property | token category |\n| ------------ | ------------ | -------------- ","titleNoSpaces":"transitions","descriptionNoSpaces":"jsxstylepropsforcontrollinganelement'stransitionandanimation.","tagsNoSpaces":"document","titleWords":["transitions"],"descriptionWords":["jsx","style","props","for","controlling","an","element's","transition","and","animation."],"tagsWords":["document"]}},{"id":"Style Props-Typography","title":"Typography","description":"JSX style props for styling text","tags":["document"],"route":"home/style-props/typography","menu":["Home","Style Props","Typography"],"content":"Typography\n\nJSX style props for styling text\n\nFont Family\n\nUse the fontFamily prop to set the font family of a text element.\n\n``jsx\n<Text fontFamily=\"mono\">Hello World</Text>\n`\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| fontFamily | font-family | fonts        |\n\nFont Size\n\nUse the fontSize prop to set the font size of a text element.\n\n`jsx\n// hardcoded values\n<Text fontSize=\"12px\">Hello World</Text>\n<Text fontSize=\"10rem\">Hello World</T","_lower":{"title":"typography","description":"jsx style props for styling text","tags":"document","content":"typography\n\njsx style props for styling text\n\nfont family\n\nuse the fontfamily prop to set the font family of a text element.\n\n``jsx\n<text fontfamily=\"mono\">hello world</text>\n`\n\n| prop         | css property  | token category |\n| ------------ | ------------- | -------------- |\n| fontfamily | font-family | fonts        |\n\nfont size\n\nuse the fontsize prop to set the font size of a text element.\n\n`jsx\n// hardcoded values\n<text fontsize=\"12px\">hello world</text>\n<text fontsize=\"10rem\">hello world</t","combined":"typography jsx style props for styling text document typography\n\njsx style props for styling text\n\nfont family\n\nuse the fontfamily prop to set the font family of a text element.\n\n``jsx\n<text fontfamily=\"mono\">hello world</text>\n`\n\n| prop         | css property  | token category |\n| ------------ | ------------- | -------------- |\n| fontfamily | font-family | fonts        |\n\nfont size\n\nuse the fontsize prop to set the font size of a text element.\n\n`jsx\n// hardcoded values\n<text fontsize=\"12px\">hello world</text>\n<text fontsize=\"10rem\">hello world</t","titleNoSpaces":"typography","descriptionNoSpaces":"jsxstylepropsforstylingtext","tagsNoSpaces":"document","titleWords":["typography"],"descriptionWords":["jsx","style","props","for","styling","text"],"tagsWords":["document"]}},{"id":"Toc","title":"Toc","description":"Let's get the table of contents automatically generated","tags":["playground","exploring"],"route":"home/playground/toc","menu":["Home","Playground","Toc"],"content":"Toc\n\nThis is the place to try out things.\n\nLevel 2.1\n\nFirst Level 2 Heading\n\nLevel 3.1\n\nFirst Level 3 Heading\n\nLevel 4.1\n\nFirst Level 4 Heading\n\nLevel 4.2\n\nSecond Level 4 Heading\n\nLevel 3.2\n\nSecond Level 3 Heading\n\nLevel 2.2","_lower":{"title":"toc","description":"let's get the table of contents automatically generated","tags":"playground exploring","content":"toc\n\nthis is the place to try out things.\n\nlevel 2.1\n\nfirst level 2 heading\n\nlevel 3.1\n\nfirst level 3 heading\n\nlevel 4.1\n\nfirst level 4 heading\n\nlevel 4.2\n\nsecond level 4 heading\n\nlevel 3.2\n\nsecond level 3 heading\n\nlevel 2.2","combined":"toc let's get the table of contents automatically generated playground exploring toc\n\nthis is the place to try out things.\n\nlevel 2.1\n\nfirst level 2 heading\n\nlevel 3.1\n\nfirst level 3 heading\n\nlevel 4.1\n\nfirst level 4 heading\n\nlevel 4.2\n\nsecond level 4 heading\n\nlevel 3.2\n\nsecond level 3 heading\n\nlevel 2.2","titleNoSpaces":"toc","descriptionNoSpaces":"let'sgetthetableofcontentsautomaticallygenerated","tagsNoSpaces":"playgroundexploring","titleWords":["toc"],"descriptionWords":["let's","get","the","table","of","contents","automatically","generated"],"tagsWords":["playground","exploring"]}},{"id":"Tokens-Other","title":"Other","description":"Less frequently used design-tokens","tags":["document"],"route":"home/design-tokens/other","menu":["Home","Design Tokens","Other"],"content":"Other\n\nLess frequently used design-tokens\n\n<CategoryOverview />","_lower":{"title":"other","description":"less frequently used design-tokens","tags":"document","content":"other\n\nless frequently used design-tokens\n\n<categoryoverview />","combined":"other less frequently used design-tokens document other\n\nless frequently used design-tokens\n\n<categoryoverview />","titleNoSpaces":"other","descriptionNoSpaces":"lessfrequentlyuseddesign-tokens","tagsNoSpaces":"document","titleWords":["other"],"descriptionWords":["less","frequently","used","design-tokens"],"tagsWords":["document"]}},{"id":"TokensAnimations","title":"Animations","description":"The list of available animation tokens","tags":["animation","transition"],"route":"home/design-tokens/other/animations","menu":["Home","Design Tokens","Other","Animations"],"content":"Animations\n\nThis page provides a list of tokens for applying ready made animations\n(shorthands) or creating custom animations or transitions by combining keyframe\nanimations with durations and easings.\n\nShorthands\n\nThe following list of shorthand tokens can be used as animation property\nvalue, they combine a keyframe animation with duration and easing for a reusable\nanimation definition.\n\n<GenericTokenTableDemo category=\"animations\" demoProperty=\"animation\" />\n\nKeyframe Animations\n\nCSS keyframe ","_lower":{"title":"animations","description":"the list of available animation tokens","tags":"animation transition","content":"animations\n\nthis page provides a list of tokens for applying ready made animations\n(shorthands) or creating custom animations or transitions by combining keyframe\nanimations with durations and easings.\n\nshorthands\n\nthe following list of shorthand tokens can be used as animation property\nvalue, they combine a keyframe animation with duration and easing for a reusable\nanimation definition.\n\n<generictokentabledemo category=\"animations\" demoproperty=\"animation\" />\n\nkeyframe animations\n\ncss keyframe ","combined":"animations the list of available animation tokens animation transition animations\n\nthis page provides a list of tokens for applying ready made animations\n(shorthands) or creating custom animations or transitions by combining keyframe\nanimations with durations and easings.\n\nshorthands\n\nthe following list of shorthand tokens can be used as animation property\nvalue, they combine a keyframe animation with duration and easing for a reusable\nanimation definition.\n\n<generictokentabledemo category=\"animations\" demoproperty=\"animation\" />\n\nkeyframe animations\n\ncss keyframe ","titleNoSpaces":"animations","descriptionNoSpaces":"thelistofavailableanimationtokens","tagsNoSpaces":"animationtransition","titleWords":["animations"],"descriptionWords":["the","list","of","available","animation","tokens"],"tagsWords":["animation","transition"]}},{"id":"TokensAspectRatios","title":"Aspect Ratios","description":"The list of available aspect ratio tokens","tags":["aspect ratio","ratios"],"route":"home/design-tokens/aspect-ratios","menu":["Home","Design Tokens","Aspect Ratios"],"content":"Aspect Ratios\n\nThe list of available aspect ratio tokens:\n\n<GenericTokenTableDemo category=\"aspectRatios\" demoProperty=\"aspectRatio\" />","_lower":{"title":"aspect ratios","description":"the list of available aspect ratio tokens","tags":"aspect ratio ratios","content":"aspect ratios\n\nthe list of available aspect ratio tokens:\n\n<generictokentabledemo category=\"aspectratios\" demoproperty=\"aspectratio\" />","combined":"aspect ratios the list of available aspect ratio tokens aspect ratio ratios aspect ratios\n\nthe list of available aspect ratio tokens:\n\n<generictokentabledemo category=\"aspectratios\" demoproperty=\"aspectratio\" />","titleNoSpaces":"aspectratios","descriptionNoSpaces":"thelistofavailableaspectratiotokens","tagsNoSpaces":"aspectratioratios","titleWords":["aspect","ratios"],"descriptionWords":["the","list","of","available","aspect","ratio","tokens"],"tagsWords":["aspect","ratio","ratios"]}},{"id":"TokensBlurs","title":"Blurs","description":"The list of available blur tokens","tags":["blur"],"route":"home/design-tokens/other/blurs","menu":["Home","Design Tokens","Other","Blurs"],"content":"Blurs\n\nThe list of available blur tokens:\n\n<GenericTokenTableDemo category=\"blurs\" demoProperty=\"blur\" />","_lower":{"title":"blurs","description":"the list of available blur tokens","tags":"blur","content":"blurs\n\nthe list of available blur tokens:\n\n<generictokentabledemo category=\"blurs\" demoproperty=\"blur\" />","combined":"blurs the list of available blur tokens blur blurs\n\nthe list of available blur tokens:\n\n<generictokentabledemo category=\"blurs\" demoproperty=\"blur\" />","titleNoSpaces":"blurs","descriptionNoSpaces":"thelistofavailableblurtokens","tagsNoSpaces":"blur","titleWords":["blurs"],"descriptionWords":["the","list","of","available","blur","tokens"],"tagsWords":["blur"]}},{"id":"TokensBorders","title":"Borders","description":"The list of available border tokens","tags":["border"],"route":"home/design-tokens/borders","menu":["Home","Design Tokens","Borders"],"content":"Borders\n\nThe list of available border tokens:\n\n<GenericTokenTableDemo category=\"borders\" demoProperty=\"border\" />\n\n> [!IMPORTANT]  \n> The design system uses box-sizing: border-box as a default. If you assign an\n> element a width of 100px, the computed border-width value will be\n> included in the 100px, effectively reducing the amount of space available\n> for content.","_lower":{"title":"borders","description":"the list of available border tokens","tags":"border","content":"borders\n\nthe list of available border tokens:\n\n<generictokentabledemo category=\"borders\" demoproperty=\"border\" />\n\n> [!important]  \n> the design system uses box-sizing: border-box as a default. if you assign an\n> element a width of 100px, the computed border-width value will be\n> included in the 100px, effectively reducing the amount of space available\n> for content.","combined":"borders the list of available border tokens border borders\n\nthe list of available border tokens:\n\n<generictokentabledemo category=\"borders\" demoproperty=\"border\" />\n\n> [!important]  \n> the design system uses box-sizing: border-box as a default. if you assign an\n> element a width of 100px, the computed border-width value will be\n> included in the 100px, effectively reducing the amount of space available\n> for content.","titleNoSpaces":"borders","descriptionNoSpaces":"thelistofavailablebordertokens","tagsNoSpaces":"border","titleWords":["borders"],"descriptionWords":["the","list","of","available","border","tokens"],"tagsWords":["border"]}},{"id":"TokensCursors","title":"Cursors","description":"The list of available cursor tokens","tags":["cursor"],"route":"home/design-tokens/other/cursors","menu":["Home","Design Tokens","Other","Cursors"],"content":"Cursors\n\nThe list of available cursors. Hover over the gray box to see the cursor in\naction.\n\n<GenericTokenTableDemo category=\"cursor\" demoProperty=\"cursor\" />","_lower":{"title":"cursors","description":"the list of available cursor tokens","tags":"cursor","content":"cursors\n\nthe list of available cursors. hover over the gray box to see the cursor in\naction.\n\n<generictokentabledemo category=\"cursor\" demoproperty=\"cursor\" />","combined":"cursors the list of available cursor tokens cursor cursors\n\nthe list of available cursors. hover over the gray box to see the cursor in\naction.\n\n<generictokentabledemo category=\"cursor\" demoproperty=\"cursor\" />","titleNoSpaces":"cursors","descriptionNoSpaces":"thelistofavailablecursortokens","tagsNoSpaces":"cursor","titleWords":["cursors"],"descriptionWords":["the","list","of","available","cursor","tokens"],"tagsWords":["cursor"]}},{"id":"TokensRadii","title":"Radii","description":"The list of available radius tokens","tags":["radius","radii","border-radius"],"route":"home/design-tokens/radii","menu":["Home","Design Tokens","Radii"],"content":"Radii\n\nThe list of available radius tokens\n\nTokens\n\n<GenericTokenTableDemo category=\"radii\" demoProperty=\"borderRadius\" />","_lower":{"title":"radii","description":"the list of available radius tokens","tags":"radius radii border-radius","content":"radii\n\nthe list of available radius tokens\n\ntokens\n\n<generictokentabledemo category=\"radii\" demoproperty=\"borderradius\" />","combined":"radii the list of available radius tokens radius radii border-radius radii\n\nthe list of available radius tokens\n\ntokens\n\n<generictokentabledemo category=\"radii\" demoproperty=\"borderradius\" />","titleNoSpaces":"radii","descriptionNoSpaces":"thelistofavailableradiustokens","tagsNoSpaces":"radiusradiiborder-radius","titleWords":["radii"],"descriptionWords":["the","list","of","available","radius","tokens"],"tagsWords":["radius","radii","border-radius"]}},{"id":"TokensShadows","title":"Shadows","description":"The list of available shadow tokens","tags":["shadows"],"route":"home/design-tokens/shadows","menu":["Home","Design Tokens","Shadows"],"content":"Shadows\n\nThe list of available shadow tokens\n\nTokens\n\n<GenericTokenTableDemo category=\"shadows\" demoProperty=\"boxShadow\" />","_lower":{"title":"shadows","description":"the list of available shadow tokens","tags":"shadows","content":"shadows\n\nthe list of available shadow tokens\n\ntokens\n\n<generictokentabledemo category=\"shadows\" demoproperty=\"boxshadow\" />","combined":"shadows the list of available shadow tokens shadows shadows\n\nthe list of available shadow tokens\n\ntokens\n\n<generictokentabledemo category=\"shadows\" demoproperty=\"boxshadow\" />","titleNoSpaces":"shadows","descriptionNoSpaces":"thelistofavailableshadowtokens","tagsNoSpaces":"shadows","titleWords":["shadows"],"descriptionWords":["the","list","of","available","shadow","tokens"],"tagsWords":["shadows"]}},{"id":"TokensSizes","title":"Sizes","description":"The list of available size tokens","tags":["sizes"],"route":"home/design-tokens/sizes","menu":["Home","Design Tokens","Sizes"],"content":"Sizes\n\nDifferent size type tokens are available to suit various design needs, including\nnumerical, proportional, named, breakpoint, and others.\n\nThe list of available size tokens:\n\nNumerical sizes\n\nPrecise, incrementally scaled units for defining fixed dimensions\n\n<SizesTokenDemo group=\"regular\" />\n\nProportional sizes\n\nProportional dimensional values expressed as fractions, suitable for dividing\nelements in layouts.\n\n<SizesTokenDemo group=\"fraction\" />\n\nLarge sizes\n\nSemantic size labels providin","_lower":{"title":"sizes","description":"the list of available size tokens","tags":"sizes","content":"sizes\n\ndifferent size type tokens are available to suit various design needs, including\nnumerical, proportional, named, breakpoint, and others.\n\nthe list of available size tokens:\n\nnumerical sizes\n\nprecise, incrementally scaled units for defining fixed dimensions\n\n<sizestokendemo group=\"regular\" />\n\nproportional sizes\n\nproportional dimensional values expressed as fractions, suitable for dividing\nelements in layouts.\n\n<sizestokendemo group=\"fraction\" />\n\nlarge sizes\n\nsemantic size labels providin","combined":"sizes the list of available size tokens sizes sizes\n\ndifferent size type tokens are available to suit various design needs, including\nnumerical, proportional, named, breakpoint, and others.\n\nthe list of available size tokens:\n\nnumerical sizes\n\nprecise, incrementally scaled units for defining fixed dimensions\n\n<sizestokendemo group=\"regular\" />\n\nproportional sizes\n\nproportional dimensional values expressed as fractions, suitable for dividing\nelements in layouts.\n\n<sizestokendemo group=\"fraction\" />\n\nlarge sizes\n\nsemantic size labels providin","titleNoSpaces":"sizes","descriptionNoSpaces":"thelistofavailablesizetokens","tagsNoSpaces":"sizes","titleWords":["sizes"],"descriptionWords":["the","list","of","available","size","tokens"],"tagsWords":["sizes"]}},{"id":"TokensTypography","title":"Typography","description":"everything typography related","tags":["text","headings","strong","bold","italic","emphasize"],"route":"home/design-tokens/typography","menu":["Home","Design Tokens","Typography"],"content":"Typography\n\nBelow you'll find the raw tokens to change typography styles on a text-element.\n\nText Styles\n\nText styles are collections of multiple typography rules (such as font-size,\nline-height, letter-spacing etc.) that create a specific, reusable style.\n\n> [!NOTE]  \n> I added caption, detail & body from our existing styles, but they are\n> essentially just combinations of font-size & line-height and can be mapped to\n> xs, sm & md. The headline looks can be achieved by using the\n> textStyles on","_lower":{"title":"typography","description":"everything typography related","tags":"text headings strong bold italic emphasize","content":"typography\n\nbelow you'll find the raw tokens to change typography styles on a text-element.\n\ntext styles\n\ntext styles are collections of multiple typography rules (such as font-size,\nline-height, letter-spacing etc.) that create a specific, reusable style.\n\n> [!note]  \n> i added caption, detail & body from our existing styles, but they are\n> essentially just combinations of font-size & line-height and can be mapped to\n> xs, sm & md. the headline looks can be achieved by using the\n> textstyles on","combined":"typography everything typography related text headings strong bold italic emphasize typography\n\nbelow you'll find the raw tokens to change typography styles on a text-element.\n\ntext styles\n\ntext styles are collections of multiple typography rules (such as font-size,\nline-height, letter-spacing etc.) that create a specific, reusable style.\n\n> [!note]  \n> i added caption, detail & body from our existing styles, but they are\n> essentially just combinations of font-size & line-height and can be mapped to\n> xs, sm & md. the headline looks can be achieved by using the\n> textstyles on","titleNoSpaces":"typography","descriptionNoSpaces":"everythingtypographyrelated","tagsNoSpaces":"textheadingsstrongbolditalicemphasize","titleWords":["typography"],"descriptionWords":["everything","typography","related"],"tagsWords":["text","headings","strong","bold","italic","emphasize"]}},{"id":"useCopyToClipboard","title":"useCopyToClipboard","description":"copy text to the clipboard","tags":["clipboard","copy"],"route":"hooks/usecopytoclipboard","menu":["Hooks","useCopyToClipboard"],"content":"useCopyToClipboard\n\nCopy text to a user's clipboard.\n\nUsage\n\n``jsx\nconst Demo = () => {\n  const [text, setText] = React.useState(\"\");\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    <div>\n      <input value={text} onChange={(e) => setText(e.target.value)} />\n      <button type=\"button\" onClick={() => copyToClipboard(text)}>\n        copy text\n      </button>\n      {state.error ? (\n        <p>Unable to copy value: {state.error.message}</p>\n      ) : (\n        state.value &","_lower":{"title":"usecopytoclipboard","description":"copy text to the clipboard","tags":"clipboard copy","content":"usecopytoclipboard\n\ncopy text to a user's clipboard.\n\nusage\n\n``jsx\nconst demo = () => {\n  const [text, settext] = react.usestate(\"\");\n  const [state, copytoclipboard] = usecopytoclipboard();\n\n  return (\n    <div>\n      <input value={text} onchange={(e) => settext(e.target.value)} />\n      <button type=\"button\" onclick={() => copytoclipboard(text)}>\n        copy text\n      </button>\n      {state.error ? (\n        <p>unable to copy value: {state.error.message}</p>\n      ) : (\n        state.value &","combined":"usecopytoclipboard copy text to the clipboard clipboard copy usecopytoclipboard\n\ncopy text to a user's clipboard.\n\nusage\n\n``jsx\nconst demo = () => {\n  const [text, settext] = react.usestate(\"\");\n  const [state, copytoclipboard] = usecopytoclipboard();\n\n  return (\n    <div>\n      <input value={text} onchange={(e) => settext(e.target.value)} />\n      <button type=\"button\" onclick={() => copytoclipboard(text)}>\n        copy text\n      </button>\n      {state.error ? (\n        <p>unable to copy value: {state.error.message}</p>\n      ) : (\n        state.value &","titleNoSpaces":"usecopytoclipboard","descriptionNoSpaces":"copytexttotheclipboard","tagsNoSpaces":"clipboardcopy","titleWords":["usecopytoclipboard"],"descriptionWords":["copy","text","to","the","clipboard"],"tagsWords":["clipboard","copy"]}},{"id":"useHotkeys","title":"useHotkeys","description":"use keyboard shortcuts to do stuff","tags":["keys","shortcut","keyboard"],"route":"hooks/usehotkeys","menu":["Hooks","useHotkeys"],"content":"useHotkeys\n\nThis hook allows you to listen to hotkeys in a declarative way and execute a\ncallback function once the user pressed down the given hotkey.\n\nBasic usage\n\nImport the useHotkeys hook from the package:\n\n``js\nimport { useHotkeys } from \"@commercetools/nimbus\";\n`\n\nSimple Hotkey\n\nThe most basic usage for the hook is to assign a hotkey you want to listen to\nand a callback to get executed once the user hits that key.\n\n`jsx live\nimport { useHotkeys } from \"@commercetools/nimbus\";\n\nconst App =","_lower":{"title":"usehotkeys","description":"use keyboard shortcuts to do stuff","tags":"keys shortcut keyboard","content":"usehotkeys\n\nthis hook allows you to listen to hotkeys in a declarative way and execute a\ncallback function once the user pressed down the given hotkey.\n\nbasic usage\n\nimport the usehotkeys hook from the package:\n\n``js\nimport { usehotkeys } from \"@commercetools/nimbus\";\n`\n\nsimple hotkey\n\nthe most basic usage for the hook is to assign a hotkey you want to listen to\nand a callback to get executed once the user hits that key.\n\n`jsx live\nimport { usehotkeys } from \"@commercetools/nimbus\";\n\nconst app =","combined":"usehotkeys use keyboard shortcuts to do stuff keys shortcut keyboard usehotkeys\n\nthis hook allows you to listen to hotkeys in a declarative way and execute a\ncallback function once the user pressed down the given hotkey.\n\nbasic usage\n\nimport the usehotkeys hook from the package:\n\n``js\nimport { usehotkeys } from \"@commercetools/nimbus\";\n`\n\nsimple hotkey\n\nthe most basic usage for the hook is to assign a hotkey you want to listen to\nand a callback to get executed once the user hits that key.\n\n`jsx live\nimport { usehotkeys } from \"@commercetools/nimbus\";\n\nconst app =","titleNoSpaces":"usehotkeys","descriptionNoSpaces":"usekeyboardshortcutstodostuff","tagsNoSpaces":"keysshortcutkeyboard","titleWords":["usehotkeys"],"descriptionWords":["use","keyboard","shortcuts","to","do","stuff"],"tagsWords":["keys","shortcut","keyboard"]}},{"id":"ZIndex","title":"Z-Indices","description":"The list of available z-index tokens","tags":["z-index","layer","stacking","context"],"route":"home/design-tokens/other/z-indices","menu":["Home","Design Tokens","Other","Z-Indices"],"content":"Z-Indices\n\nThe list of available z-index tokens.\n\n<GenericTokenTableDemo category=\"zIndex\" />","_lower":{"title":"z-indices","description":"the list of available z-index tokens","tags":"z-index layer stacking context","content":"z-indices\n\nthe list of available z-index tokens.\n\n<generictokentabledemo category=\"zindex\" />","combined":"z-indices the list of available z-index tokens z-index layer stacking context z-indices\n\nthe list of available z-index tokens.\n\n<generictokentabledemo category=\"zindex\" />","titleNoSpaces":"z-indices","descriptionNoSpaces":"thelistofavailablez-indextokens","tagsNoSpaces":"z-indexlayerstackingcontext","titleWords":["z-indices"],"descriptionWords":["the","list","of","available","z-index","tokens"],"tagsWords":["z-index","layer","stacking","context"]}}]
+[{"id":"Architecture-Decision-Records","title":"ADR: Using Architecture Decision Records","description":"An explanation of what Architecture Decision Records are and how we use them","tags":["architecture","documentation","process"],"route":"home/contribute/adrs","menu":["Home","Contribute","ADR's"],"content":"ADR: Using Architecture Decision Records\n\nContext\n\nAs our UI component library grows, we need a structured way to document\nimportant architectural decisions. This ensures that:\n\n- Team members understand the context and reasoning behind important decisions\n- Future contributors can reference past decisions rather than revisiting\n  settled issues\n- We maintain a useful historical record of how the project has evolved\n\nDecision\n\nWe will use Architecture Decision Records (ADRs) to document signific","_lower":{"title":"adr: using architecture decision records","description":"an explanation of what architecture decision records are and how we use them","tags":"architecture documentation process","content":"adr: using architecture decision records\n\ncontext\n\nas our ui component library grows, we need a structured way to document\nimportant architectural decisions. this ensures that:\n\n- team members understand the context and reasoning behind important decisions\n- future contributors can reference past decisions rather than revisiting\n  settled issues\n- we maintain a useful historical record of how the project has evolved\n\ndecision\n\nwe will use architecture decision records (adrs) to document signific","combined":"adr: using architecture decision records an explanation of what architecture decision records are and how we use them architecture documentation process adr: using architecture decision records\n\ncontext\n\nas our ui component library grows, we need a structured way to document\nimportant architectural decisions. this ensures that:\n\n- team members understand the context and reasoning behind important decisions\n- future contributors can reference past decisions rather than revisiting\n  settled issues\n- we maintain a useful historical record of how the project has evolved\n\ndecision\n\nwe will use architecture decision records (adrs) to document signific","titleNoSpaces":"adr:usingarchitecturedecisionrecords","descriptionNoSpaces":"anexplanationofwhatarchitecturedecisionrecordsareandhowweusethem","tagsNoSpaces":"architecturedocumentationprocess","titleWords":["adr:","using","architecture","decision","records"],"descriptionWords":["an","explanation","of","what","architecture","decision","records","are","and","how","we","use","them"],"tagsWords":["architecture","documentation","process"]}},{"id":"Breakpoints","title":"Breakpoints","description":"The list of available breakpoints","tags":["z-index","layer","stacking","context"],"route":"home/design-tokens/other/breakpoints","menu":["Home","Design Tokens","Other","Breakpoints"],"content":"Breakpoints\n\nBreakpoints define specific screen widths at which your design should adapt to\nprovide an optimal viewing experience for users. They are thresholds that\nrepresent a starting point for changes in styling, such as font sizes, layouts,\nand visibility of elements.\n\nEach breakpoint is a minimum width, meaning that styles associated with that\nbreakpoint apply to screen sizes equal to or larger than the specified width.\nThe styles remain active until the next breakpoint threshold is reache","_lower":{"title":"breakpoints","description":"the list of available breakpoints","tags":"z-index layer stacking context","content":"breakpoints\n\nbreakpoints define specific screen widths at which your design should adapt to\nprovide an optimal viewing experience for users. they are thresholds that\nrepresent a starting point for changes in styling, such as font sizes, layouts,\nand visibility of elements.\n\neach breakpoint is a minimum width, meaning that styles associated with that\nbreakpoint apply to screen sizes equal to or larger than the specified width.\nthe styles remain active until the next breakpoint threshold is reache","combined":"breakpoints the list of available breakpoints z-index layer stacking context breakpoints\n\nbreakpoints define specific screen widths at which your design should adapt to\nprovide an optimal viewing experience for users. they are thresholds that\nrepresent a starting point for changes in styling, such as font sizes, layouts,\nand visibility of elements.\n\neach breakpoint is a minimum width, meaning that styles associated with that\nbreakpoint apply to screen sizes equal to or larger than the specified width.\nthe styles remain active until the next breakpoint threshold is reache","titleNoSpaces":"breakpoints","descriptionNoSpaces":"thelistofavailablebreakpoints","tagsNoSpaces":"z-indexlayerstackingcontext","titleWords":["breakpoints"],"descriptionWords":["the","list","of","available","breakpoints"],"tagsWords":["z-index","layer","stacking","context"]}},{"id":"Colors","title":"Colors","description":"available colors","tags":["colors"],"route":"home/design-tokens/colors","menu":["Home","Design Tokens","Colors"],"content":"Colors\n\nOur color system is built on Radix Colors,\nwhich organizes colors into scales based on contrast levels to ensure\nclarity and usability across various contexts. Each scale provides a range\nof tones, from subtle backgrounds to high-contrast elements like text and\ninteractive borders. A full scale for a given color is referred to as a\ncolorPalette (e.g., colorPalette: \"red\").\n\nThe scales are _interchangeable_, meaning a color like red can be swapped with\ngreen without losing the intended co","_lower":{"title":"colors","description":"available colors","tags":"colors","content":"colors\n\nour color system is built on radix colors,\nwhich organizes colors into scales based on contrast levels to ensure\nclarity and usability across various contexts. each scale provides a range\nof tones, from subtle backgrounds to high-contrast elements like text and\ninteractive borders. a full scale for a given color is referred to as a\ncolorpalette (e.g., colorpalette: \"red\").\n\nthe scales are _interchangeable_, meaning a color like red can be swapped with\ngreen without losing the intended co","combined":"colors available colors colors colors\n\nour color system is built on radix colors,\nwhich organizes colors into scales based on contrast levels to ensure\nclarity and usability across various contexts. each scale provides a range\nof tones, from subtle backgrounds to high-contrast elements like text and\ninteractive borders. a full scale for a given color is referred to as a\ncolorpalette (e.g., colorpalette: \"red\").\n\nthe scales are _interchangeable_, meaning a color like red can be swapped with\ngreen without losing the intended co","titleNoSpaces":"colors","descriptionNoSpaces":"availablecolors","tagsNoSpaces":"colors","titleWords":["colors"],"descriptionWords":["available","colors"],"tagsWords":["colors"]}},{"id":"Component-Lifecycle-States","title":"ADR: Nimbus Software Lifecycle States","description":"Architecture decision record defining the lifecycle states for Nimbus components, hooks, utilities, classes, etc.","tags":["architecture","lifecycle","versioning","stability"],"route":"home/contribute/adrs/adr0003-component-lifecycle-states","menu":["Home","Contribute","ADR's","ADR0003 Component Lifecycle States"],"content":"ADR: Nimbus Software Lifecycle States\n\nContext\n\nAs Nimbus grows and evolves, we need a clear system to communicate the\nstability, support level, and future trajectory of our components, hooks,\nutilities, functions, and classes to consumers. Without a standardized\nlifecycle system, consumers cannot make informed decisions about adoption,\nmigration planning, or production readiness.\n\nThe lack of clear lifecycle states leads to:\n- Uncertainty about which features are safe for production use\n- Diffi","_lower":{"title":"adr: nimbus software lifecycle states","description":"architecture decision record defining the lifecycle states for nimbus components, hooks, utilities, classes, etc.","tags":"architecture lifecycle versioning stability","content":"adr: nimbus software lifecycle states\n\ncontext\n\nas nimbus grows and evolves, we need a clear system to communicate the\nstability, support level, and future trajectory of our components, hooks,\nutilities, functions, and classes to consumers. without a standardized\nlifecycle system, consumers cannot make informed decisions about adoption,\nmigration planning, or production readiness.\n\nthe lack of clear lifecycle states leads to:\n- uncertainty about which features are safe for production use\n- diffi","combined":"adr: nimbus software lifecycle states architecture decision record defining the lifecycle states for nimbus components, hooks, utilities, classes, etc. architecture lifecycle versioning stability adr: nimbus software lifecycle states\n\ncontext\n\nas nimbus grows and evolves, we need a clear system to communicate the\nstability, support level, and future trajectory of our components, hooks,\nutilities, functions, and classes to consumers. without a standardized\nlifecycle system, consumers cannot make informed decisions about adoption,\nmigration planning, or production readiness.\n\nthe lack of clear lifecycle states leads to:\n- uncertainty about which features are safe for production use\n- diffi","titleNoSpaces":"adr:nimbussoftwarelifecyclestates","descriptionNoSpaces":"architecturedecisionrecorddefiningthelifecyclestatesfornimbuscomponents,hooks,utilities,classes,etc.","tagsNoSpaces":"architecturelifecycleversioningstability","titleWords":["adr:","nimbus","software","lifecycle","states"],"descriptionWords":["architecture","decision","record","defining","the","lifecycle","states","for","nimbus","components,","hooks,","utilities,","classes,","etc."],"tagsWords":["architecture","lifecycle","versioning","stability"]}},{"id":"Components","title":"Components","description":"React components for building robust and visually appealing applications.","tags":["components","react"],"route":"components","menu":["Components"],"content":"Components\n\n<CategoryOverview />","_lower":{"title":"components","description":"react components for building robust and visually appealing applications.","tags":"components react","content":"components\n\n<categoryoverview />","combined":"components react components for building robust and visually appealing applications. components react components\n\n<categoryoverview />","titleNoSpaces":"components","descriptionNoSpaces":"reactcomponentsforbuildingrobustandvisuallyappealingapplications.","tagsNoSpaces":"componentsreact","titleWords":["components"],"descriptionWords":["react","components","for","building","robust","and","visually","appealing","applications."],"tagsWords":["components","react"]}},{"id":"Components-Accessibility","title":"Accessibility","description":"Components designed to enhance accessibility and ARIA compliance.","tags":["document"],"route":"components/accessibility","menu":["Components","Accessibility"],"content":"Accessibility\n\nComponents designed to enhance accessibility and ARIA compliance.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"accessibility","description":"components designed to enhance accessibility and aria compliance.","tags":"document","content":"accessibility\n\ncomponents designed to enhance accessibility and aria compliance.\n\n<categoryoverview variant=\"list\" />","combined":"accessibility components designed to enhance accessibility and aria compliance. document accessibility\n\ncomponents designed to enhance accessibility and aria compliance.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"accessibility","descriptionNoSpaces":"componentsdesignedtoenhanceaccessibilityandariacompliance.","tagsNoSpaces":"document","titleWords":["accessibility"],"descriptionWords":["components","designed","to","enhance","accessibility","and","aria","compliance."],"tagsWords":["document"]}},{"id":"Components-Accordion","title":"Accordion","exportName":"Accordion","description":"A collapsable component lets users show and hide sections of related content on a page.","tags":["component","accordion","expandable","disclosure","panels"],"route":"components/navigation/accordion","menu":["Components","Navigation","Accordion"],"content":"Overview\n\nThe primary difference between accordion types lies in whether they use\nadditional controls for accessing information or offer a simple click-to-expand\ninteraction.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact ARIA\nARIA Pattern\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nMedium\n\nThe default size for forms.\n\n``jsx live\nconst App = () => (\n  <Accordion.Root>\n    <Accordion.Item>\n      <Accordion.Header>\n        Headli","_lower":{"title":"accordion","description":"a collapsable component lets users show and hide sections of related content on a page.","tags":"component accordion expandable disclosure panels","content":"overview\n\nthe primary difference between accordion types lies in whether they use\nadditional controls for accessing information or offer a simple click-to-expand\ninteraction.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium\n\nthe default size for forms.\n\n``jsx live\nconst app = () => (\n  <accordion.root>\n    <accordion.item>\n      <accordion.header>\n        headli","combined":"accordion a collapsable component lets users show and hide sections of related content on a page. component accordion expandable disclosure panels overview\n\nthe primary difference between accordion types lies in whether they use\nadditional controls for accessing information or offer a simple click-to-expand\ninteraction.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium\n\nthe default size for forms.\n\n``jsx live\nconst app = () => (\n  <accordion.root>\n    <accordion.item>\n      <accordion.header>\n        headli","titleNoSpaces":"accordion","descriptionNoSpaces":"acollapsablecomponentletsusersshowandhidesectionsofrelatedcontentonapage.","tagsNoSpaces":"componentaccordionexpandabledisclosurepanels","titleWords":["accordion"],"descriptionWords":["a","collapsable","component","lets","users","show","and","hide","sections","of","related","content","on","a","page."],"tagsWords":["component","accordion","expandable","disclosure","panels"]}},{"id":"Components-Alert","title":"Alert","exportName":"Alert","description":"For urgent, high-impact messages, such as system alerts, alert banners are used to ensure visibility and encourage immediate user response.","tags":["component","alert","notification","status","banner"],"route":"components/feedback/alert","menu":["Components","Feedback","Alert"],"content":"Overview\n\nThese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nAdjustable elements\n\nSeveral of the features are flexible and optional for many use cases.\nNon-optional elements are the message, and the icons that are tied to the type\nof mes","_lower":{"title":"alert","description":"for urgent, high-impact messages, such as system alerts, alert banners are used to ensure visibility and encourage immediate user response.","tags":"component alert notification status banner","content":"overview\n\nthese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nadjustable elements\n\nseveral of the features are flexible and optional for many use cases.\nnon-optional elements are the message, and the icons that are tied to the type\nof mes","combined":"alert for urgent, high-impact messages, such as system alerts, alert banners are used to ensure visibility and encourage immediate user response. component alert notification status banner overview\n\nthese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nadjustable elements\n\nseveral of the features are flexible and optional for many use cases.\nnon-optional elements are the message, and the icons that are tied to the type\nof mes","titleNoSpaces":"alert","descriptionNoSpaces":"forurgent,high-impactmessages,suchassystemalerts,alertbannersareusedtoensurevisibilityandencourageimmediateuserresponse.","tagsNoSpaces":"componentalertnotificationstatusbanner","titleWords":["alert"],"descriptionWords":["for","urgent,","high-impact","messages,","such","as","system","alerts,","alert","banners","are","used","to","ensure","visibility","and","encourage","immediate","user","response."],"tagsWords":["component","alert","notification","status","banner"]}},{"id":"Components-Avatar","title":"Avatar","exportName":"Avatar","description":"A small image or icon that identifies and personalizes the user within the interface.","tags":["component","avatar","user","profile","image"],"route":"components/media/avatar","menu":["Components","Media","Avatar"],"content":"Overview\n\nAvatar components can include images or the initials of the user’s first and\nlast name.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nMedium (40px)\n\nMost commonly used in the upper right hand side of the page paired with a\ndrop-down menu.\n\n``jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\">\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotex","_lower":{"title":"avatar","description":"a small image or icon that identifies and personalizes the user within the interface.","tags":"component avatar user profile image","content":"overview\n\navatar components can include images or the initials of the user’s first and\nlast name.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium (40px)\n\nmost commonly used in the upper right hand side of the page paired with a\ndrop-down menu.\n\n``jsx live\nconst app = () => (\n  <stack direction=\"horizontal\">\n    <avatar firstname=\"adam\" lastname=\"vadam\" src=\"https://thispersondoesnotex","combined":"avatar a small image or icon that identifies and personalizes the user within the interface. component avatar user profile image overview\n\navatar components can include images or the initials of the user’s first and\nlast name.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium (40px)\n\nmost commonly used in the upper right hand side of the page paired with a\ndrop-down menu.\n\n``jsx live\nconst app = () => (\n  <stack direction=\"horizontal\">\n    <avatar firstname=\"adam\" lastname=\"vadam\" src=\"https://thispersondoesnotex","titleNoSpaces":"avatar","descriptionNoSpaces":"asmallimageoriconthatidentifiesandpersonalizestheuserwithintheinterface.","tagsNoSpaces":"componentavataruserprofileimage","titleWords":["avatar"],"descriptionWords":["a","small","image","or","icon","that","identifies","and","personalizes","the","user","within","the","interface."],"tagsWords":["component","avatar","user","profile","image"]}},{"id":"Components-Badge","title":"Badge","exportName":"Badge","description":"Briefly highlights or categorizes associated UI elements with concise visual cues for status or metadata.","tags":["component","badge","label","status","indicator"],"route":"components/data-display/badge","menu":["Components","Data Display","Badge"],"content":"Overview\n\nBadges are small, visually distinct labels used to highlight status, category,\nor counts associated with other UI elements. They feature concise text and\ncustomizable styling for clear communication without overwhelming the primary\ncontent.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nMedium\n\nThis is the default size.\n\n``jsx live\nconst App = () => (\n  <Badge colorPalette=\"primar","_lower":{"title":"badge","description":"briefly highlights or categorizes associated ui elements with concise visual cues for status or metadata.","tags":"component badge label status indicator","content":"overview\n\nbadges are small, visually distinct labels used to highlight status, category,\nor counts associated with other ui elements. they feature concise text and\ncustomizable styling for clear communication without overwhelming the primary\ncontent.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium\n\nthis is the default size.\n\n``jsx live\nconst app = () => (\n  <badge colorpalette=\"primar","combined":"badge briefly highlights or categorizes associated ui elements with concise visual cues for status or metadata. component badge label status indicator overview\n\nbadges are small, visually distinct labels used to highlight status, category,\nor counts associated with other ui elements. they feature concise text and\ncustomizable styling for clear communication without overwhelming the primary\ncontent.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium\n\nthis is the default size.\n\n``jsx live\nconst app = () => (\n  <badge colorpalette=\"primar","titleNoSpaces":"badge","descriptionNoSpaces":"brieflyhighlightsorcategorizesassociateduielementswithconcisevisualcuesforstatusormetadata.","tagsNoSpaces":"componentbadgelabelstatusindicator","titleWords":["badge"],"descriptionWords":["briefly","highlights","or","categorizes","associated","ui","elements","with","concise","visual","cues","for","status","or","metadata."],"tagsWords":["component","badge","label","status","indicator"]}},{"id":"Components-Box","title":"Box","exportName":"Box","description":"Box is a basic layout component that serves as a wrapper or container. It's based on the Chakra UI Box component and supports all style props for rapid UI development.","tags":["component","box","container","wrapper","layout"],"route":"components/layout/box","menu":["Components","Layout","Box"],"content":"Import\n\n``jsx\nimport { Box } from \"@commercetools/nimbus\";\n`\n\nUsage\n\nBasic usage\n\n`jsx live\nconst App = () => (\n  <Box p=\"100\" bg=\"primary.3\">\n    Basic Box\n  </Box>\n);\n`\n\nAs a flex container\n\n`jsx live\nconst App = () => (\n  <Box display=\"flex\" gap=\"100\">\n    <Box p=\"100\" bg=\"primary.3\">\n      Item 1\n    </Box>\n    <Box p=\"100\" bg=\"primary.3\">\n      Item 2\n    </Box>\n  </Box>\n);\n`\n\nWith border\n\n`jsx live\nconst App = () => (\n  <Box p=\"100\" border=\"solid-50\" borderColor=\"primary.3\">\n    Box with b","_lower":{"title":"box","description":"box is a basic layout component that serves as a wrapper or container. it's based on the chakra ui box component and supports all style props for rapid ui development.","tags":"component box container wrapper layout","content":"import\n\n``jsx\nimport { box } from \"@commercetools/nimbus\";\n`\n\nusage\n\nbasic usage\n\n`jsx live\nconst app = () => (\n  <box p=\"100\" bg=\"primary.3\">\n    basic box\n  </box>\n);\n`\n\nas a flex container\n\n`jsx live\nconst app = () => (\n  <box display=\"flex\" gap=\"100\">\n    <box p=\"100\" bg=\"primary.3\">\n      item 1\n    </box>\n    <box p=\"100\" bg=\"primary.3\">\n      item 2\n    </box>\n  </box>\n);\n`\n\nwith border\n\n`jsx live\nconst app = () => (\n  <box p=\"100\" border=\"solid-50\" bordercolor=\"primary.3\">\n    box with b","combined":"box box is a basic layout component that serves as a wrapper or container. it's based on the chakra ui box component and supports all style props for rapid ui development. component box container wrapper layout import\n\n``jsx\nimport { box } from \"@commercetools/nimbus\";\n`\n\nusage\n\nbasic usage\n\n`jsx live\nconst app = () => (\n  <box p=\"100\" bg=\"primary.3\">\n    basic box\n  </box>\n);\n`\n\nas a flex container\n\n`jsx live\nconst app = () => (\n  <box display=\"flex\" gap=\"100\">\n    <box p=\"100\" bg=\"primary.3\">\n      item 1\n    </box>\n    <box p=\"100\" bg=\"primary.3\">\n      item 2\n    </box>\n  </box>\n);\n`\n\nwith border\n\n`jsx live\nconst app = () => (\n  <box p=\"100\" border=\"solid-50\" bordercolor=\"primary.3\">\n    box with b","titleNoSpaces":"box","descriptionNoSpaces":"boxisabasiclayoutcomponentthatservesasawrapperorcontainer.it'sbasedonthechakrauiboxcomponentandsupportsallstylepropsforrapiduidevelopment.","tagsNoSpaces":"componentboxcontainerwrapperlayout","titleWords":["box"],"descriptionWords":["box","is","a","basic","layout","component","that","serves","as","a","wrapper","or","container.","it's","based","on","the","chakra","ui","box","component","and","supports","all","style","props","for","rapid","ui","development."],"tagsWords":["component","box","container","wrapper","layout"]}},{"id":"Components-Button","title":"Button","exportName":"Button","description":"A button serves as a standardized, reusable component for triggering actions and navigating.","tags":["component","buttons","forms"],"route":"components/buttons/button","menu":["Components","Buttons","Button"],"content":"Overview\n\nButtons are clickable elements that initiate actions. They're how we encourage\nusers to take action and explore different parts of our interface.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nHierarchy\n\nPrimary actions\n\nPrimary colorPalette, filled style, medium size. For the principal call to action on the\npage. Primary buttons should only appear once per screen.\n\n- A solid button should be used as a primary action on a page us","_lower":{"title":"button","description":"a button serves as a standardized, reusable component for triggering actions and navigating.","tags":"component buttons forms","content":"overview\n\nbuttons are clickable elements that initiate actions. they're how we encourage\nusers to take action and explore different parts of our interface.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nhierarchy\n\nprimary actions\n\nprimary colorpalette, filled style, medium size. for the principal call to action on the\npage. primary buttons should only appear once per screen.\n\n- a solid button should be used as a primary action on a page us","combined":"button a button serves as a standardized, reusable component for triggering actions and navigating. component buttons forms overview\n\nbuttons are clickable elements that initiate actions. they're how we encourage\nusers to take action and explore different parts of our interface.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nhierarchy\n\nprimary actions\n\nprimary colorpalette, filled style, medium size. for the principal call to action on the\npage. primary buttons should only appear once per screen.\n\n- a solid button should be used as a primary action on a page us","titleNoSpaces":"button","descriptionNoSpaces":"abuttonservesasastandardized,reusablecomponentfortriggeringactionsandnavigating.","tagsNoSpaces":"componentbuttonsforms","titleWords":["button"],"descriptionWords":["a","button","serves","as","a","standardized,","reusable","component","for","triggering","actions","and","navigating."],"tagsWords":["component","buttons","forms"]}},{"id":"Components-Buttons","title":"Buttons","description":"Components for triggering actions, submitting forms, and navigation.","tags":["buttons","actions","interactions"],"route":"components/buttons","menu":["Components","Buttons"],"content":"Buttons  \n\nComponents for triggering actions, submitting forms, and navigation.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"buttons","description":"components for triggering actions, submitting forms, and navigation.","tags":"buttons actions interactions","content":"buttons  \n\ncomponents for triggering actions, submitting forms, and navigation.\n\n<categoryoverview variant=\"list\" />","combined":"buttons components for triggering actions, submitting forms, and navigation. buttons actions interactions buttons  \n\ncomponents for triggering actions, submitting forms, and navigation.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"buttons","descriptionNoSpaces":"componentsfortriggeringactions,submittingforms,andnavigation.","tagsNoSpaces":"buttonsactionsinteractions","titleWords":["buttons"],"descriptionWords":["components","for","triggering","actions,","submitting","forms,","and","navigation."],"tagsWords":["buttons","actions","interactions"]}},{"id":"Components-Calendar","title":"Calendar","exportName":"Calendar","description":"Calendars display a grid of days in one or more months and allow users to select a single date.","tags":["component","calendar","date","picker","month"],"route":"components/inputs/calendar","menu":["Components","Inputs","Calendar"],"content":"Overview\n\nThe calendar component is most often used within the popover component when a\nuser interacts with a date input. Easily toggle between month, year, and single\nday selection.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nSingle date select\n\nAllow users to see the current date, and select a single date.\n\n``jsx live\nconst App = () => <Calendar aria-label=\"Enter a ","_lower":{"title":"calendar","description":"calendars display a grid of days in one or more months and allow users to select a single date.","tags":"component calendar date picker month","content":"overview\n\nthe calendar component is most often used within the popover component when a\nuser interacts with a date input. easily toggle between month, year, and single\nday selection.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsingle date select\n\nallow users to see the current date, and select a single date.\n\n``jsx live\nconst app = () => <calendar aria-label=\"enter a ","combined":"calendar calendars display a grid of days in one or more months and allow users to select a single date. component calendar date picker month overview\n\nthe calendar component is most often used within the popover component when a\nuser interacts with a date input. easily toggle between month, year, and single\nday selection.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsingle date select\n\nallow users to see the current date, and select a single date.\n\n``jsx live\nconst app = () => <calendar aria-label=\"enter a ","titleNoSpaces":"calendar","descriptionNoSpaces":"calendarsdisplayagridofdaysinoneormoremonthsandallowuserstoselectasingledate.","tagsNoSpaces":"componentcalendardatepickermonth","titleWords":["calendar"],"descriptionWords":["calendars","display","a","grid","of","days","in","one","or","more","months","and","allow","users","to","select","a","single","date."],"tagsWords":["component","calendar","date","picker","month"]}},{"id":"Components-Card","title":"Card","exportName":"Card","description":"A versatile container component presents self-contained information, often combining text, images, and actions, making it ideal for displaying summaries or content previews.","tags":["component","card","container","surface","content"],"route":"components/data-display/card","menu":["Components","Data Display","Card"],"content":"Overview\n\nThis versatile container component often integrates text, images, and actions.\nInteraction methods differ: some are clickable, others use buttons and links,\nand some are purely informational, grouping content without direct interaction.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library","_lower":{"title":"card","description":"a versatile container component presents self-contained information, often combining text, images, and actions, making it ideal for displaying summaries or content previews.","tags":"component card container surface content","content":"overview\n\nthis versatile container component often integrates text, images, and actions.\ninteraction methods differ: some are clickable, others use buttons and links,\nand some are purely informational, grouping content without direct interaction.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library","combined":"card a versatile container component presents self-contained information, often combining text, images, and actions, making it ideal for displaying summaries or content previews. component card container surface content overview\n\nthis versatile container component often integrates text, images, and actions.\ninteraction methods differ: some are clickable, others use buttons and links,\nand some are purely informational, grouping content without direct interaction.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library","titleNoSpaces":"card","descriptionNoSpaces":"aversatilecontainercomponentpresentsself-containedinformation,oftencombiningtext,images,andactions,makingitidealfordisplayingsummariesorcontentpreviews.","tagsNoSpaces":"componentcardcontainersurfacecontent","titleWords":["card"],"descriptionWords":["a","versatile","container","component","presents","self-contained","information,","often","combining","text,","images,","and","actions,","making","it","ideal","for","displaying","summaries","or","content","previews."],"tagsWords":["component","card","container","surface","content"]}},{"id":"Components-Checkbox","title":"Checkbox","exportName":"Checkbox","description":"Checkbox allows for toggling of features, allowing users to select more than one option where needed. Checkboxes support selected, unselected, indeterminate, and disabled states.","tags":["component","checkbox","input","toggle","boolean"],"route":"components/inputs/checkbox","menu":["Components","Inputs","Checkbox"],"content":"Overview\n\nCheckboxes are commonly used in forms, settings panels, and other interactive\ncontexts where users can choose one or more options from a set. See below\nvariables for further choices.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSelection\n\nUnchecked\n\nRepresents the default or unchosen state.\n\n``jsx live\nconst App = () => <Checkbox>Label</Checkbox>\n`\n\nSelect\n\nVisually confirms a user’s ","_lower":{"title":"checkbox","description":"checkbox allows for toggling of features, allowing users to select more than one option where needed. checkboxes support selected, unselected, indeterminate, and disabled states.","tags":"component checkbox input toggle boolean","content":"overview\n\ncheckboxes are commonly used in forms, settings panels, and other interactive\ncontexts where users can choose one or more options from a set. see below\nvariables for further choices.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nselection\n\nunchecked\n\nrepresents the default or unchosen state.\n\n``jsx live\nconst app = () => <checkbox>label</checkbox>\n`\n\nselect\n\nvisually confirms a user’s ","combined":"checkbox checkbox allows for toggling of features, allowing users to select more than one option where needed. checkboxes support selected, unselected, indeterminate, and disabled states. component checkbox input toggle boolean overview\n\ncheckboxes are commonly used in forms, settings panels, and other interactive\ncontexts where users can choose one or more options from a set. see below\nvariables for further choices.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nselection\n\nunchecked\n\nrepresents the default or unchosen state.\n\n``jsx live\nconst app = () => <checkbox>label</checkbox>\n`\n\nselect\n\nvisually confirms a user’s ","titleNoSpaces":"checkbox","descriptionNoSpaces":"checkboxallowsfortogglingoffeatures,allowinguserstoselectmorethanoneoptionwhereneeded.checkboxessupportselected,unselected,indeterminate,anddisabledstates.","tagsNoSpaces":"componentcheckboxinputtoggleboolean","titleWords":["checkbox"],"descriptionWords":["checkbox","allows","for","toggling","of","features,","allowing","users","to","select","more","than","one","option","where","needed.","checkboxes","support","selected,","unselected,","indeterminate,","and","disabled","states."],"tagsWords":["component","checkbox","input","toggle","boolean"]}},{"id":"Components-Code","title":"Code","exportName":"Code","description":"renders code blocks","tags":["component","code","syntax","monospace"],"route":"components/typography/code","menu":["Components","Typography","Code"],"content":"Add description later.","_lower":{"title":"code","description":"renders code blocks","tags":"component code syntax monospace","content":"add description later.","combined":"code renders code blocks component code syntax monospace add description later.","titleNoSpaces":"code","descriptionNoSpaces":"renderscodeblocks","tagsNoSpaces":"componentcodesyntaxmonospace","titleWords":["code"],"descriptionWords":["renders","code","blocks"],"tagsWords":["component","code","syntax","monospace"]}},{"id":"Components-CollapsibleMotion","title":"Collapsible motion","exportName":"CollapsibleMotion","description":"A modern, accessible implementation of collapsible content with smooth height animations. Built with React Aria for accessibility and Chakra UI for consistent theming.","tags":["component","collapsible","accordion","disclosure","animation","accessibility"],"route":"components/navigation/collapsible-motion","menu":["Components","Navigation","Collapsible motion"],"content":"Overview\n\nCollapsibleMotion is a compound component that provides smooth, accessible\ncollapsible content with height animations. It combines React Aria's\naccessibility features with Chakra UI's theming system to deliver a robust\nfoundation for disclosure patterns, accordions, and expandable content sections.\n\nKey features\n\n- Smooth height animations: Customizable duration with automatic content\n  measurement\n- Full accessibility support: Proper ARIA attributes and screen reader\n  compatibility\n-","_lower":{"title":"collapsible motion","description":"a modern, accessible implementation of collapsible content with smooth height animations. built with react aria for accessibility and chakra ui for consistent theming.","tags":"component collapsible accordion disclosure animation accessibility","content":"overview\n\ncollapsiblemotion is a compound component that provides smooth, accessible\ncollapsible content with height animations. it combines react aria's\naccessibility features with chakra ui's theming system to deliver a robust\nfoundation for disclosure patterns, accordions, and expandable content sections.\n\nkey features\n\n- smooth height animations: customizable duration with automatic content\n  measurement\n- full accessibility support: proper aria attributes and screen reader\n  compatibility\n-","combined":"collapsible motion a modern, accessible implementation of collapsible content with smooth height animations. built with react aria for accessibility and chakra ui for consistent theming. component collapsible accordion disclosure animation accessibility overview\n\ncollapsiblemotion is a compound component that provides smooth, accessible\ncollapsible content with height animations. it combines react aria's\naccessibility features with chakra ui's theming system to deliver a robust\nfoundation for disclosure patterns, accordions, and expandable content sections.\n\nkey features\n\n- smooth height animations: customizable duration with automatic content\n  measurement\n- full accessibility support: proper aria attributes and screen reader\n  compatibility\n-","titleNoSpaces":"collapsiblemotion","descriptionNoSpaces":"amodern,accessibleimplementationofcollapsiblecontentwithsmoothheightanimations.builtwithreactariaforaccessibilityandchakrauiforconsistenttheming.","tagsNoSpaces":"componentcollapsibleaccordiondisclosureanimationaccessibility","titleWords":["collapsible","motion"],"descriptionWords":["a","modern,","accessible","implementation","of","collapsible","content","with","smooth","height","animations.","built","with","react","aria","for","accessibility","and","chakra","ui","for","consistent","theming."],"tagsWords":["component","collapsible","accordion","disclosure","animation","accessibility"]}},{"id":"Components-ComboBox","title":"Combo box","exportName":"ComboBox","description":"A combobox is an input that combines a text field with a pop-up list of options. It allows users to select a value from a predefined list or enter their own custom value.","tags":["component","combobox","autocomplete","dropdown","typeahead"],"route":"components/inputs/combo-box","menu":["Components","Inputs","Combo box"],"content":"Overview\n\nThe combobox component provides both selection and text input capabilities. It\ndisplays a list of options that users can choose from, while also allowing them\nto type directly into the text field. This functionality improves user\nexperience by assisting with value selection and, in some cases, prevents\ninvalid entries.\n\nKey features\n\n- External State Management: Full control over async logic using React Stately's useAsyncList\n- Debouncing: Use useDebouncedCallback from use-debounce to ","_lower":{"title":"combo box","description":"a combobox is an input that combines a text field with a pop-up list of options. it allows users to select a value from a predefined list or enter their own custom value.","tags":"component combobox autocomplete dropdown typeahead","content":"overview\n\nthe combobox component provides both selection and text input capabilities. it\ndisplays a list of options that users can choose from, while also allowing them\nto type directly into the text field. this functionality improves user\nexperience by assisting with value selection and, in some cases, prevents\ninvalid entries.\n\nkey features\n\n- external state management: full control over async logic using react stately's useasynclist\n- debouncing: use usedebouncedcallback from use-debounce to ","combined":"combo box a combobox is an input that combines a text field with a pop-up list of options. it allows users to select a value from a predefined list or enter their own custom value. component combobox autocomplete dropdown typeahead overview\n\nthe combobox component provides both selection and text input capabilities. it\ndisplays a list of options that users can choose from, while also allowing them\nto type directly into the text field. this functionality improves user\nexperience by assisting with value selection and, in some cases, prevents\ninvalid entries.\n\nkey features\n\n- external state management: full control over async logic using react stately's useasynclist\n- debouncing: use usedebouncedcallback from use-debounce to ","titleNoSpaces":"combobox","descriptionNoSpaces":"acomboboxisaninputthatcombinesatextfieldwithapop-uplistofoptions.itallowsuserstoselectavaluefromapredefinedlistorentertheirowncustomvalue.","tagsNoSpaces":"componentcomboboxautocompletedropdowntypeahead","titleWords":["combo","box"],"descriptionWords":["a","combobox","is","an","input","that","combines","a","text","field","with","a","pop-up","list","of","options.","it","allows","users","to","select","a","value","from","a","predefined","list","or","enter","their","own","custom","value."],"tagsWords":["component","combobox","autocomplete","dropdown","typeahead"]}},{"id":"Components-Data Display","title":"Data Display","description":"Components for presenting data or visual content.","tags":["document"],"route":"components/data-display","menu":["Components","Data Display"],"content":"Data Display\n\nComponents for presenting data or visual content.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"data display","description":"components for presenting data or visual content.","tags":"document","content":"data display\n\ncomponents for presenting data or visual content.\n\n<categoryoverview variant=\"list\" />","combined":"data display components for presenting data or visual content. document data display\n\ncomponents for presenting data or visual content.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"datadisplay","descriptionNoSpaces":"componentsforpresentingdataorvisualcontent.","tagsNoSpaces":"document","titleWords":["data","display"],"descriptionWords":["components","for","presenting","data","or","visual","content."],"tagsWords":["document"]}},{"id":"Components-DataTable","title":"Data table","exportName":"DataTable","description":"Data tables display sets of data across rows and columns. Use them to organize information, enable comparisons, and allow users to inspect and interact with large datasets.","tags":["component","table","data"],"route":"components/data-display/data-table","menu":["Components","Data Display","Data table"],"content":"Overview\n\nData tables are essential tools for presenting sets of data in a structured\nformat, utilizing rows and columns to enhance clarity. They serve multiple\npurposes: organizing information systematically, facilitating comparisons\nbetween different data points, and providing users with the ability to\nthoroughly inspect and interact with extensive datasets. By incorporating\nfeatures such as sorting, filtering, and pagination, data tables empower users\nto navigate through large volumes of info","_lower":{"title":"data table","description":"data tables display sets of data across rows and columns. use them to organize information, enable comparisons, and allow users to inspect and interact with large datasets.","tags":"component table data","content":"overview\n\ndata tables are essential tools for presenting sets of data in a structured\nformat, utilizing rows and columns to enhance clarity. they serve multiple\npurposes: organizing information systematically, facilitating comparisons\nbetween different data points, and providing users with the ability to\nthoroughly inspect and interact with extensive datasets. by incorporating\nfeatures such as sorting, filtering, and pagination, data tables empower users\nto navigate through large volumes of info","combined":"data table data tables display sets of data across rows and columns. use them to organize information, enable comparisons, and allow users to inspect and interact with large datasets. component table data overview\n\ndata tables are essential tools for presenting sets of data in a structured\nformat, utilizing rows and columns to enhance clarity. they serve multiple\npurposes: organizing information systematically, facilitating comparisons\nbetween different data points, and providing users with the ability to\nthoroughly inspect and interact with extensive datasets. by incorporating\nfeatures such as sorting, filtering, and pagination, data tables empower users\nto navigate through large volumes of info","titleNoSpaces":"datatable","descriptionNoSpaces":"datatablesdisplaysetsofdataacrossrowsandcolumns.usethemtoorganizeinformation,enablecomparisons,andallowuserstoinspectandinteractwithlargedatasets.","tagsNoSpaces":"componenttabledata","titleWords":["data","table"],"descriptionWords":["data","tables","display","sets","of","data","across","rows","and","columns.","use","them","to","organize","information,","enable","comparisons,","and","allow","users","to","inspect","and","interact","with","large","datasets."],"tagsWords":["component","table","data"]}},{"id":"Components-DateInput","title":"Date input","exportName":"DateInput","description":"A date input component allows users to enter a specific date.","tags":["component","date","calendar"],"route":"components/inputs/date-input","menu":["Components","Inputs","Date input"],"content":"Overview\n\nThe date input field uses a conventional date format, such as mm/dd/yyyy, which\nis localized based on the user's region. Users can type a date directly into the\nfield. The component automatically formats the input as the user types.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma Link\nStorybook Link\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nMedium\n\n``jsx live\nconst App = () => <DateInput aria-label=\"Enter a date\"/>\n`\n\nSm","_lower":{"title":"date input","description":"a date input component allows users to enter a specific date.","tags":"component date calendar","content":"overview\n\nthe date input field uses a conventional date format, such as mm/dd/yyyy, which\nis localized based on the user's region. users can type a date directly into the\nfield. the component automatically formats the input as the user types.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma link\nstorybook link\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\nconst app = () => <dateinput aria-label=\"enter a date\"/>\n`\n\nsm","combined":"date input a date input component allows users to enter a specific date. component date calendar overview\n\nthe date input field uses a conventional date format, such as mm/dd/yyyy, which\nis localized based on the user's region. users can type a date directly into the\nfield. the component automatically formats the input as the user types.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma link\nstorybook link\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\nconst app = () => <dateinput aria-label=\"enter a date\"/>\n`\n\nsm","titleNoSpaces":"dateinput","descriptionNoSpaces":"adateinputcomponentallowsuserstoenteraspecificdate.","tagsNoSpaces":"componentdatecalendar","titleWords":["date","input"],"descriptionWords":["a","date","input","component","allows","users","to","enter","a","specific","date."],"tagsWords":["component","date","calendar"]}},{"id":"Components-DatePicker","title":"Date picker","exportName":"DatePicker","description":"A date picker is a UI component for users to input or select a specific calendar date.","tags":["component","date","calendar"],"route":"components/inputs/date-picker","menu":["Components","Inputs","Date picker"],"content":"Overview\n\nDate picker can be simple or complex, allowing users to select a single date and\nor specific times. There are two offered sizes, the default being medium for\nmost use cases.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nMedium\n\n``jsx live\n const App = () => <DatePicker size=\"md\" aria-label=\"Enter a date\" width=\"1/3\" />\n`\n\nSmall\n\n`jsx live\n const App = () => <DatePicker ","_lower":{"title":"date picker","description":"a date picker is a ui component for users to input or select a specific calendar date.","tags":"component date calendar","content":"overview\n\ndate picker can be simple or complex, allowing users to select a single date and\nor specific times. there are two offered sizes, the default being medium for\nmost use cases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\n const app = () => <datepicker size=\"md\" aria-label=\"enter a date\" width=\"1/3\" />\n`\n\nsmall\n\n`jsx live\n const app = () => <datepicker ","combined":"date picker a date picker is a ui component for users to input or select a specific calendar date. component date calendar overview\n\ndate picker can be simple or complex, allowing users to select a single date and\nor specific times. there are two offered sizes, the default being medium for\nmost use cases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\n const app = () => <datepicker size=\"md\" aria-label=\"enter a date\" width=\"1/3\" />\n`\n\nsmall\n\n`jsx live\n const app = () => <datepicker ","titleNoSpaces":"datepicker","descriptionNoSpaces":"adatepickerisauicomponentforuserstoinputorselectaspecificcalendardate.","tagsNoSpaces":"componentdatecalendar","titleWords":["date","picker"],"descriptionWords":["a","date","picker","is","a","ui","component","for","users","to","input","or","select","a","specific","calendar","date."],"tagsWords":["component","date","calendar"]}},{"id":"Components-DateRangePicker","title":"Date range picker","exportName":"DateRangePicker","description":"Allows users to select a start and end date from a calendar interface.","tags":["component","date","calendar"],"route":"components/inputs/date-range-picker","menu":["Components","Inputs","Date range picker"],"content":"Overview\n\nDate range pickers allow users to select a range of dates. The component\nincludes two date input fields for start and end dates, and a calendar that\nappears on focus. This component uses a single input field to contain both the\nstart and end dates. There are two offered sizes, the default being medium for\nmost use cases.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nMed","_lower":{"title":"date range picker","description":"allows users to select a start and end date from a calendar interface.","tags":"component date calendar","content":"overview\n\ndate range pickers allow users to select a range of dates. the component\nincludes two date input fields for start and end dates, and a calendar that\nappears on focus. this component uses a single input field to contain both the\nstart and end dates. there are two offered sizes, the default being medium for\nmost use cases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmed","combined":"date range picker allows users to select a start and end date from a calendar interface. component date calendar overview\n\ndate range pickers allow users to select a range of dates. the component\nincludes two date input fields for start and end dates, and a calendar that\nappears on focus. this component uses a single input field to contain both the\nstart and end dates. there are two offered sizes, the default being medium for\nmost use cases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmed","titleNoSpaces":"daterangepicker","descriptionNoSpaces":"allowsuserstoselectastartandenddatefromacalendarinterface.","tagsNoSpaces":"componentdatecalendar","titleWords":["date","range","picker"],"descriptionWords":["allows","users","to","select","a","start","and","end","date","from","a","calendar","interface."],"tagsWords":["component","date","calendar"]}},{"id":"Components-DefaultPage","title":"DefaultPage","exportName":"DefaultPage","description":"A layout component that structures pages into header, scrollable content, and optional footer zones. Supports optional back navigation for detail views, tab navigation, and sticky header/footer variants.","tags":["component","layout","default-page"],"route":"components/layout/defaultpage","menu":["Components","Layout","DefaultPage"],"content":"Overview\n\nDefaultPage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nThe presence or absence of DefaultPage.BackLink determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\nKey features\n\n- DefaultPage.Header — Two-column grid that positions Title and Subtitle on\n  the left and Actions on the right\n- DefaultPag","_lower":{"title":"defaultpage","description":"a layout component that structures pages into header, scrollable content, and optional footer zones. supports optional back navigation for detail views, tab navigation, and sticky header/footer variants.","tags":"component layout default-page","content":"overview\n\ndefaultpage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nthe presence or absence of defaultpage.backlink determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\nkey features\n\n- defaultpage.header — two-column grid that positions title and subtitle on\n  the left and actions on the right\n- defaultpag","combined":"defaultpage a layout component that structures pages into header, scrollable content, and optional footer zones. supports optional back navigation for detail views, tab navigation, and sticky header/footer variants. component layout default-page overview\n\ndefaultpage is a unified compound component that structures both top-level and\ndetail views into three zones: a fixed header, a scrollable content area, and an\noptional footer.\n\nthe presence or absence of defaultpage.backlink determines which pattern is in\nuse: omit it for top-level main pages; include it for detail views that need\nback navigation.\n\nkey features\n\n- defaultpage.header — two-column grid that positions title and subtitle on\n  the left and actions on the right\n- defaultpag","titleNoSpaces":"defaultpage","descriptionNoSpaces":"alayoutcomponentthatstructurespagesintoheader,scrollablecontent,andoptionalfooterzones.supportsoptionalbacknavigationfordetailviews,tabnavigation,andstickyheader/footervariants.","tagsNoSpaces":"componentlayoutdefault-page","titleWords":["defaultpage"],"descriptionWords":["a","layout","component","that","structures","pages","into","header,","scrollable","content,","and","optional","footer","zones.","supports","optional","back","navigation","for","detail","views,","tab","navigation,","and","sticky","header/footer","variants."],"tagsWords":["component","layout","default-page"]}},{"id":"Components-Dialog","title":"Dialog","exportName":"Dialog","description":"A foundational dialog component for overlays that require user attention and interaction. Built with React Aria Components for accessibility and WCAG 2.1 AA compliance.","tags":["component","overlay","dialog","modal","interactive"],"route":"components/feedback/dialog","menu":["Components","Feedback","Dialog"],"content":"Overview\n\nDialogs are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. They\ntemporarily disable the main interface until the user completes an action or\ndismisses the dialog.\n\nKey features\n\n- Accessibility First: Built with React Aria Components for WCAG 2.1 AA\n  compliance\n- Flexible Positioning: Support for center, top, and bottom placements\n- Responsive Sizing: Multiple size variants from xs to full-screen\n-","_lower":{"title":"dialog","description":"a foundational dialog component for overlays that require user attention and interaction. built with react aria components for accessibility and wcag 2.1 aa compliance.","tags":"component overlay dialog modal interactive","content":"overview\n\ndialogs are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. they\ntemporarily disable the main interface until the user completes an action or\ndismisses the dialog.\n\nkey features\n\n- accessibility first: built with react aria components for wcag 2.1 aa\n  compliance\n- flexible positioning: support for center, top, and bottom placements\n- responsive sizing: multiple size variants from xs to full-screen\n-","combined":"dialog a foundational dialog component for overlays that require user attention and interaction. built with react aria components for accessibility and wcag 2.1 aa compliance. component overlay dialog modal interactive overview\n\ndialogs are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. they\ntemporarily disable the main interface until the user completes an action or\ndismisses the dialog.\n\nkey features\n\n- accessibility first: built with react aria components for wcag 2.1 aa\n  compliance\n- flexible positioning: support for center, top, and bottom placements\n- responsive sizing: multiple size variants from xs to full-screen\n-","titleNoSpaces":"dialog","descriptionNoSpaces":"afoundationaldialogcomponentforoverlaysthatrequireuserattentionandinteraction.builtwithreactariacomponentsforaccessibilityandwcag2.1aacompliance.","tagsNoSpaces":"componentoverlaydialogmodalinteractive","titleWords":["dialog"],"descriptionWords":["a","foundational","dialog","component","for","overlays","that","require","user","attention","and","interaction.","built","with","react","aria","components","for","accessibility","and","wcag","2.1","aa","compliance."],"tagsWords":["component","overlay","dialog","modal","interactive"]}},{"id":"Components-DraggableList","title":"Draggable list","exportName":"DraggableList","description":"The draggable list allows users to easily reorder or manage a sequence of items via a direct drag-and-drop interaction.","tags":["component","lists","drag and drop","interactive"],"route":"components/data-display/draggable-list","menu":["Components","Data Display","Draggable list"],"content":"Overview\n\nThe draggable list component presents structured, ordered content where the\nsequence itself is meaningful. It uses visual and functional cues to enable\nusers to physically manipulate the list order by dragging an item to a new\ninsertion point, providing immediate visual feedback throughout the process.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\nReact Aria Docs\n\nVariables\n\nGet familiar with the features.\n\nInteractions","_lower":{"title":"draggable list","description":"the draggable list allows users to easily reorder or manage a sequence of items via a direct drag-and-drop interaction.","tags":"component lists drag and drop interactive","content":"overview\n\nthe draggable list component presents structured, ordered content where the\nsequence itself is meaningful. it uses visual and functional cues to enable\nusers to physically manipulate the list order by dragging an item to a new\ninsertion point, providing immediate visual feedback throughout the process.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\nreact aria docs\n\nvariables\n\nget familiar with the features.\n\ninteractions","combined":"draggable list the draggable list allows users to easily reorder or manage a sequence of items via a direct drag-and-drop interaction. component lists drag and drop interactive overview\n\nthe draggable list component presents structured, ordered content where the\nsequence itself is meaningful. it uses visual and functional cues to enable\nusers to physically manipulate the list order by dragging an item to a new\ninsertion point, providing immediate visual feedback throughout the process.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\nreact aria docs\n\nvariables\n\nget familiar with the features.\n\ninteractions","titleNoSpaces":"draggablelist","descriptionNoSpaces":"thedraggablelistallowsuserstoeasilyreorderormanageasequenceofitemsviaadirectdrag-and-dropinteraction.","tagsNoSpaces":"componentlistsdraganddropinteractive","titleWords":["draggable","list"],"descriptionWords":["the","draggable","list","allows","users","to","easily","reorder","or","manage","a","sequence","of","items","via","a","direct","drag-and-drop","interaction."],"tagsWords":["component","lists","drag","and","drop","interactive"]}},{"id":"Components-Drawer","title":"Drawer","exportName":"Drawer","description":"A foundational drawer component for overlays that require user attention and interaction. Built with React Aria Components for accessibility and WCAG 2.1 AA compliance.","tags":["component","overlay","dialog","modal","interactive"],"route":"components/feedback/drawer","menu":["Components","Feedback","Drawer"],"content":"Overview\n\nDrawers are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. They\ntemporarily disable the main interface until the user completes an action or\ndismisses the drawer.\n\nKey features\n\n- Accessibility First: Built with React Aria Components for WCAG 2.1 AA\n  compliance\n- Flexible Positioning: Support for left, right, top, and bottom placements\n- Responsive Sizing: Multiple size variants from xs to full-scr","_lower":{"title":"drawer","description":"a foundational drawer component for overlays that require user attention and interaction. built with react aria components for accessibility and wcag 2.1 aa compliance.","tags":"component overlay dialog modal interactive","content":"overview\n\ndrawers are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. they\ntemporarily disable the main interface until the user completes an action or\ndismisses the drawer.\n\nkey features\n\n- accessibility first: built with react aria components for wcag 2.1 aa\n  compliance\n- flexible positioning: support for left, right, top, and bottom placements\n- responsive sizing: multiple size variants from xs to full-scr","combined":"drawer a foundational drawer component for overlays that require user attention and interaction. built with react aria components for accessibility and wcag 2.1 aa compliance. component overlay dialog modal interactive overview\n\ndrawers are overlay windows that appear on top of the main content to display\nimportant information, gather user input, or require user decisions. they\ntemporarily disable the main interface until the user completes an action or\ndismisses the drawer.\n\nkey features\n\n- accessibility first: built with react aria components for wcag 2.1 aa\n  compliance\n- flexible positioning: support for left, right, top, and bottom placements\n- responsive sizing: multiple size variants from xs to full-scr","titleNoSpaces":"drawer","descriptionNoSpaces":"afoundationaldrawercomponentforoverlaysthatrequireuserattentionandinteraction.builtwithreactariacomponentsforaccessibilityandwcag2.1aacompliance.","tagsNoSpaces":"componentoverlaydialogmodalinteractive","titleWords":["drawer"],"descriptionWords":["a","foundational","drawer","component","for","overlays","that","require","user","attention","and","interaction.","built","with","react","aria","components","for","accessibility","and","wcag","2.1","aa","compliance."],"tagsWords":["component","overlay","dialog","modal","interactive"]}},{"id":"Components-Feedback","title":"Feedback","description":"Components for providing user feedback.","tags":["document"],"route":"components/feedback","menu":["Components","Feedback"],"content":"Feedback\n\nComponents for providing user feedback.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"feedback","description":"components for providing user feedback.","tags":"document","content":"feedback\n\ncomponents for providing user feedback.\n\n<categoryoverview variant=\"list\" />","combined":"feedback components for providing user feedback. document feedback\n\ncomponents for providing user feedback.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"feedback","descriptionNoSpaces":"componentsforprovidinguserfeedback.","tagsNoSpaces":"document","titleWords":["feedback"],"descriptionWords":["components","for","providing","user","feedback."],"tagsWords":["document"]}},{"id":"Components-FieldErrors","title":"Field errors","exportName":"FieldErrors","description":"Context specific, localized error messages for individual form fields.","tags":["component","form","validation","errors"],"route":"components/forms/field-errors","menu":["Components","Forms","Field errors"],"content":"Overview\n\nThe field errors component is a vital utility for user-friendly form validation,\nresponsible for displaying context-specific, localized error messages for\nindividual form fields. It ensures users receive clear, immediate feedback on\nvalidation issues, maintaining a consistent and accessible experience.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nVisual elements\n\nColor: Defa","_lower":{"title":"field errors","description":"context specific, localized error messages for individual form fields.","tags":"component form validation errors","content":"overview\n\nthe field errors component is a vital utility for user-friendly form validation,\nresponsible for displaying context-specific, localized error messages for\nindividual form fields. it ensures users receive clear, immediate feedback on\nvalidation issues, maintaining a consistent and accessible experience.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual elements\n\ncolor: defa","combined":"field errors context specific, localized error messages for individual form fields. component form validation errors overview\n\nthe field errors component is a vital utility for user-friendly form validation,\nresponsible for displaying context-specific, localized error messages for\nindividual form fields. it ensures users receive clear, immediate feedback on\nvalidation issues, maintaining a consistent and accessible experience.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual elements\n\ncolor: defa","titleNoSpaces":"fielderrors","descriptionNoSpaces":"contextspecific,localizederrormessagesforindividualformfields.","tagsNoSpaces":"componentformvalidationerrors","titleWords":["field","errors"],"descriptionWords":["context","specific,","localized","error","messages","for","individual","form","fields."],"tagsWords":["component","form","validation","errors"]}},{"id":"Components-Flex","title":"Flex","exportName":"Flex","description":"Flex is a layout component that provides a convenient way to create flexible layouts based on CSS Flexbox. It's based on the Chakra UI Flex component and supports all style props for rapid UI development.","tags":["component","flex","flexbox","layout"],"route":"components/layout/flex","menu":["Components","Layout","Flex"],"content":"Overview\n\nThe Flex component is essentially a Box component with display: flex applied\nby default. It provides an intuitive API for creating flexible layouts and\nsupports all flexbox properties.\n\nKey features\n\n- Flexbox by default: Automatically applies display: flex\n- Style props: Supports all Chakra UI style props for rapid development\n- Responsive design: Easily create responsive layouts with responsive props\n- Semantic HTML: Can render as any HTML element using the as prop\n\nResources\n\nLearn ","_lower":{"title":"flex","description":"flex is a layout component that provides a convenient way to create flexible layouts based on css flexbox. it's based on the chakra ui flex component and supports all style props for rapid ui development.","tags":"component flex flexbox layout","content":"overview\n\nthe flex component is essentially a box component with display: flex applied\nby default. it provides an intuitive api for creating flexible layouts and\nsupports all flexbox properties.\n\nkey features\n\n- flexbox by default: automatically applies display: flex\n- style props: supports all chakra ui style props for rapid development\n- responsive design: easily create responsive layouts with responsive props\n- semantic html: can render as any html element using the as prop\n\nresources\n\nlearn ","combined":"flex flex is a layout component that provides a convenient way to create flexible layouts based on css flexbox. it's based on the chakra ui flex component and supports all style props for rapid ui development. component flex flexbox layout overview\n\nthe flex component is essentially a box component with display: flex applied\nby default. it provides an intuitive api for creating flexible layouts and\nsupports all flexbox properties.\n\nkey features\n\n- flexbox by default: automatically applies display: flex\n- style props: supports all chakra ui style props for rapid development\n- responsive design: easily create responsive layouts with responsive props\n- semantic html: can render as any html element using the as prop\n\nresources\n\nlearn ","titleNoSpaces":"flex","descriptionNoSpaces":"flexisalayoutcomponentthatprovidesaconvenientwaytocreateflexiblelayoutsbasedoncssflexbox.it'sbasedonthechakrauiflexcomponentandsupportsallstylepropsforrapiduidevelopment.","tagsNoSpaces":"componentflexflexboxlayout","titleWords":["flex"],"descriptionWords":["flex","is","a","layout","component","that","provides","a","convenient","way","to","create","flexible","layouts","based","on","css","flexbox.","it's","based","on","the","chakra","ui","flex","component","and","supports","all","style","props","for","rapid","ui","development."],"tagsWords":["component","flex","flexbox","layout"]}},{"id":"Components-FormField","title":"Form field","exportName":"FormField","description":"Form fields are the building blocks of user interaction, collecting essential data, facilitating actions, and enabling customization within digital interfaces.","tags":["component","form","field","label","input wrapper"],"route":"components/forms/form-field","menu":["Components","Forms","Form field"],"content":"Overview\n\nComposed of several elements, a label, optional helper icon, a text input. There\nis also an optional helper text feature that presents at the bottom of the\nfield.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nLabel options\n\nSimple\n\nLabel is used to describe the form.\n\n``jsx live\nconst App = () => {\n  const [val, setVal] = useState('Input value');\n\n  return (\n    <FormField.Root>\n      ","_lower":{"title":"form field","description":"form fields are the building blocks of user interaction, collecting essential data, facilitating actions, and enabling customization within digital interfaces.","tags":"component form field label input wrapper","content":"overview\n\ncomposed of several elements, a label, optional helper icon, a text input. there\nis also an optional helper text feature that presents at the bottom of the\nfield.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nlabel options\n\nsimple\n\nlabel is used to describe the form.\n\n``jsx live\nconst app = () => {\n  const [val, setval] = usestate('input value');\n\n  return (\n    <formfield.root>\n      ","combined":"form field form fields are the building blocks of user interaction, collecting essential data, facilitating actions, and enabling customization within digital interfaces. component form field label input wrapper overview\n\ncomposed of several elements, a label, optional helper icon, a text input. there\nis also an optional helper text feature that presents at the bottom of the\nfield.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nlabel options\n\nsimple\n\nlabel is used to describe the form.\n\n``jsx live\nconst app = () => {\n  const [val, setval] = usestate('input value');\n\n  return (\n    <formfield.root>\n      ","titleNoSpaces":"formfield","descriptionNoSpaces":"formfieldsarethebuildingblocksofuserinteraction,collectingessentialdata,facilitatingactions,andenablingcustomizationwithindigitalinterfaces.","tagsNoSpaces":"componentformfieldlabelinputwrapper","titleWords":["form","field"],"descriptionWords":["form","fields","are","the","building","blocks","of","user","interaction,","collecting","essential","data,","facilitating","actions,","and","enabling","customization","within","digital","interfaces."],"tagsWords":["component","form","field","label","input","wrapper"]}},{"id":"Components-Forms","title":"Forms","description":"Components for form validation, localization, and error handling.","tags":["forms","validation","errors","localization"],"route":"components/forms","menu":["Components","Forms"],"content":"Forms\n\nComponents for form validation, localization, and error handling.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"forms","description":"components for form validation, localization, and error handling.","tags":"forms validation errors localization","content":"forms\n\ncomponents for form validation, localization, and error handling.\n\n<categoryoverview variant=\"list\" />","combined":"forms components for form validation, localization, and error handling. forms validation errors localization forms\n\ncomponents for form validation, localization, and error handling.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"forms","descriptionNoSpaces":"componentsforformvalidation,localization,anderrorhandling.","tagsNoSpaces":"formsvalidationerrorslocalization","titleWords":["forms"],"descriptionWords":["components","for","form","validation,","localization,","and","error","handling."],"tagsWords":["forms","validation","errors","localization"]}},{"id":"Components-Grid","title":"Grid","exportName":"Grid","description":"The Grid Layout Component provides a flexible and responsive way to structure content using a two-dimensional grid system. It allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes. The component accepts all the chakra supported properties and Grid.Item as children elements.","tags":["component","grid","layout","columns","rows"],"route":"components/layout/grid","menu":["Components","Layout","Grid"],"content":"Basic usage\n\nUse Grid → When you need fine control over layout, spanning, and custom grid\nbehaviors.\n\n``jsx\nimport { Grid } from \"@commercetools/nimbus\";\n`\n\nTo use the Grid layout, ensure to wrap the individual grid items inside of the\n<Grid.Item> component\n\n`jsx live\nconst App = () => (\n  <Grid gap=\"100\">\n    <Grid.Item>\n      <Box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        Item 1\n      </Box>\n    </Grid.Item>\n    <Grid.Item>\n      <Box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        Item 2\n      </Box>\n ","_lower":{"title":"grid","description":"the grid layout component provides a flexible and responsive way to structure content using a two-dimensional grid system. it allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes. the component accepts all the chakra supported properties and grid.item as children elements.","tags":"component grid layout columns rows","content":"basic usage\n\nuse grid → when you need fine control over layout, spanning, and custom grid\nbehaviors.\n\n``jsx\nimport { grid } from \"@commercetools/nimbus\";\n`\n\nto use the grid layout, ensure to wrap the individual grid items inside of the\n<grid.item> component\n\n`jsx live\nconst app = () => (\n  <grid gap=\"100\">\n    <grid.item>\n      <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        item 1\n      </box>\n    </grid.item>\n    <grid.item>\n      <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        item 2\n      </box>\n ","combined":"grid the grid layout component provides a flexible and responsive way to structure content using a two-dimensional grid system. it allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes. the component accepts all the chakra supported properties and grid.item as children elements. component grid layout columns rows basic usage\n\nuse grid → when you need fine control over layout, spanning, and custom grid\nbehaviors.\n\n``jsx\nimport { grid } from \"@commercetools/nimbus\";\n`\n\nto use the grid layout, ensure to wrap the individual grid items inside of the\n<grid.item> component\n\n`jsx live\nconst app = () => (\n  <grid gap=\"100\">\n    <grid.item>\n      <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        item 1\n      </box>\n    </grid.item>\n    <grid.item>\n      <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n        item 2\n      </box>\n ","titleNoSpaces":"grid","descriptionNoSpaces":"thegridlayoutcomponentprovidesaflexibleandresponsivewaytostructurecontentusingatwo-dimensionalgridsystem.itallowselementstobearrangedinrowsandcolumns,enablingdynamicandefficientlayoutsfordifferentscreensizes.thecomponentacceptsallthechakrasupportedpropertiesandgrid.itemaschildrenelements.","tagsNoSpaces":"componentgridlayoutcolumnsrows","titleWords":["grid"],"descriptionWords":["the","grid","layout","component","provides","a","flexible","and","responsive","way","to","structure","content","using","a","two-dimensional","grid","system.","it","allows","elements","to","be","arranged","in","rows","and","columns,","enabling","dynamic","and","efficient","layouts","for","different","screen","sizes.","the","component","accepts","all","the","chakra","supported","properties","and","grid.item","as","children","elements."],"tagsWords":["component","grid","layout","columns","rows"]}},{"id":"Components-Group","title":"Group","exportName":"Group","description":"Groups related elements together for better organization and layout.","tags":["component","group","fieldset","form","cluster"],"route":"components/forms/group","menu":["Components","Forms","Group"],"content":"Overview\n\nThe Group component provides a flexible way to group related UI elements with\nconsistent spacing and alignment. It's particularly useful for creating forms,\ntoolbars, and other collections of interactive elements.\n\nVariables\n\nGet familiar with the features.\n\nBasic Usage\n\n``jsx live\nconst App = () => (\n  <Group>\n    <Button>First</Button>\n    <Button>Second</Button>\n    <Button>Third</Button>\n  </Group>\n)\n``","_lower":{"title":"group","description":"groups related elements together for better organization and layout.","tags":"component group fieldset form cluster","content":"overview\n\nthe group component provides a flexible way to group related ui elements with\nconsistent spacing and alignment. it's particularly useful for creating forms,\ntoolbars, and other collections of interactive elements.\n\nvariables\n\nget familiar with the features.\n\nbasic usage\n\n``jsx live\nconst app = () => (\n  <group>\n    <button>first</button>\n    <button>second</button>\n    <button>third</button>\n  </group>\n)\n``","combined":"group groups related elements together for better organization and layout. component group fieldset form cluster overview\n\nthe group component provides a flexible way to group related ui elements with\nconsistent spacing and alignment. it's particularly useful for creating forms,\ntoolbars, and other collections of interactive elements.\n\nvariables\n\nget familiar with the features.\n\nbasic usage\n\n``jsx live\nconst app = () => (\n  <group>\n    <button>first</button>\n    <button>second</button>\n    <button>third</button>\n  </group>\n)\n``","titleNoSpaces":"group","descriptionNoSpaces":"groupsrelatedelementstogetherforbetterorganizationandlayout.","tagsNoSpaces":"componentgroupfieldsetformcluster","titleWords":["group"],"descriptionWords":["groups","related","elements","together","for","better","organization","and","layout."],"tagsWords":["component","group","fieldset","form","cluster"]}},{"id":"Components-Heading","title":"Heading","exportName":"Heading","description":"The heading component establishes typographic hierarchy throughout the product experience. It is crucial for organizing content, defining page structure, and improving content scan ability.","tags":["component","typography","heading"],"route":"components/typography/heading","menu":["Components","Typography","Heading"],"content":"Overview\n\nGood headings are essential for organizing information and engaging users. They\nclearly communicate the content's topic, making the page scannable and easier to\nnavigate. Effective headlines also improve accessibility for screen readers and\naid search engine optimization (SEO) by defining content relevance.\n\nResources\n\nDeep dive on details and access design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nTypographic scale and hierarchy\n\nThese text styles are the re","_lower":{"title":"heading","description":"the heading component establishes typographic hierarchy throughout the product experience. it is crucial for organizing content, defining page structure, and improving content scan ability.","tags":"component typography heading","content":"overview\n\ngood headings are essential for organizing information and engaging users. they\nclearly communicate the content's topic, making the page scannable and easier to\nnavigate. effective headlines also improve accessibility for screen readers and\naid search engine optimization (seo) by defining content relevance.\n\nresources\n\ndeep dive on details and access design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntypographic scale and hierarchy\n\nthese text styles are the re","combined":"heading the heading component establishes typographic hierarchy throughout the product experience. it is crucial for organizing content, defining page structure, and improving content scan ability. component typography heading overview\n\ngood headings are essential for organizing information and engaging users. they\nclearly communicate the content's topic, making the page scannable and easier to\nnavigate. effective headlines also improve accessibility for screen readers and\naid search engine optimization (seo) by defining content relevance.\n\nresources\n\ndeep dive on details and access design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntypographic scale and hierarchy\n\nthese text styles are the re","titleNoSpaces":"heading","descriptionNoSpaces":"theheadingcomponentestablishestypographichierarchythroughouttheproductexperience.itiscrucialfororganizingcontent,definingpagestructure,andimprovingcontentscanability.","tagsNoSpaces":"componenttypographyheading","titleWords":["heading"],"descriptionWords":["the","heading","component","establishes","typographic","hierarchy","throughout","the","product","experience.","it","is","crucial","for","organizing","content,","defining","page","structure,","and","improving","content","scan","ability."],"tagsWords":["component","typography","heading"]}},{"id":"Components-Icon","title":"Icon","exportName":"Icon","description":"An icon is a small graphical symbol used to represent an object, action, or idea within a user interface.","tags":["component","icon","svg","graphic","symbol"],"route":"components/media/icon","menu":["Components","Media","Icon"],"content":"Overview\n\nNimbus uses the Material Design icon library and adds custom SVG icons.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nMaterial Design Icon Library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nDefault and in color\n\n``jsx live\nconst App = () => (\n  <Stack direction=\"row\">\n    <Icon size=\"xs\"><Icons.SentimentSatisfied /></Icon>\n    <Icon size=\"xs\" color=\"primary.11\"><Icons.SentimentSatisfied /></Icon>\n    <Icon size=\"xs\" color=\"in","_lower":{"title":"icon","description":"an icon is a small graphical symbol used to represent an object, action, or idea within a user interface.","tags":"component icon svg graphic symbol","content":"overview\n\nnimbus uses the material design icon library and adds custom svg icons.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nmaterial design icon library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndefault and in color\n\n``jsx live\nconst app = () => (\n  <stack direction=\"row\">\n    <icon size=\"xs\"><icons.sentimentsatisfied /></icon>\n    <icon size=\"xs\" color=\"primary.11\"><icons.sentimentsatisfied /></icon>\n    <icon size=\"xs\" color=\"in","combined":"icon an icon is a small graphical symbol used to represent an object, action, or idea within a user interface. component icon svg graphic symbol overview\n\nnimbus uses the material design icon library and adds custom svg icons.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nmaterial design icon library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndefault and in color\n\n``jsx live\nconst app = () => (\n  <stack direction=\"row\">\n    <icon size=\"xs\"><icons.sentimentsatisfied /></icon>\n    <icon size=\"xs\" color=\"primary.11\"><icons.sentimentsatisfied /></icon>\n    <icon size=\"xs\" color=\"in","titleNoSpaces":"icon","descriptionNoSpaces":"aniconisasmallgraphicalsymbolusedtorepresentanobject,action,orideawithinauserinterface.","tagsNoSpaces":"componenticonsvggraphicsymbol","titleWords":["icon"],"descriptionWords":["an","icon","is","a","small","graphical","symbol","used","to","represent","an","object,","action,","or","idea","within","a","user","interface."],"tagsWords":["component","icon","svg","graphic","symbol"]}},{"id":"Components-IconButton","title":"Icon button","exportName":"IconButton","description":"Provides a compact and visually efficient way to represent actions, especially when space is limited or the action is universally understood.","tags":["component","buttons","actions","icons"],"route":"components/buttons/icon-button","menu":["Components","Buttons","Icon button"],"content":"Overview\n\nThese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nHierarchy\n\nMost common: Ghost\n\nGhost icon buttons are used most often, the represent familiar actions that\ndon't compete with a primary action on the page.\n\n``jsx live\nconst App = () => {\n  return (\n    <IconButton varia","_lower":{"title":"icon button","description":"provides a compact and visually efficient way to represent actions, especially when space is limited or the action is universally understood.","tags":"component buttons actions icons","content":"overview\n\nthese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nhierarchy\n\nmost common: ghost\n\nghost icon buttons are used most often, the represent familiar actions that\ndon't compete with a primary action on the page.\n\n``jsx live\nconst app = () => {\n  return (\n    <iconbutton varia","combined":"icon button provides a compact and visually efficient way to represent actions, especially when space is limited or the action is universally understood. component buttons actions icons overview\n\nthese specifications define the standard styles and variations for icon buttons\nwithin our design system, covering different visual treatments for diverse use\ncases.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nhierarchy\n\nmost common: ghost\n\nghost icon buttons are used most often, the represent familiar actions that\ndon't compete with a primary action on the page.\n\n``jsx live\nconst app = () => {\n  return (\n    <iconbutton varia","titleNoSpaces":"iconbutton","descriptionNoSpaces":"providesacompactandvisuallyefficientwaytorepresentactions,especiallywhenspaceislimitedortheactionisuniversallyunderstood.","tagsNoSpaces":"componentbuttonsactionsicons","titleWords":["icon","button"],"descriptionWords":["provides","a","compact","and","visually","efficient","way","to","represent","actions,","especially","when","space","is","limited","or","the","action","is","universally","understood."],"tagsWords":["component","buttons","actions","icons"]}},{"id":"Components-IconToggleButton","title":"Icon toggle button","exportName":"IconToggleButton","description":"An interactive icon button that toggles between two binary states such as active and inactive.","tags":["component","buttons","toggle","icon","controls"],"route":"components/buttons/icon-toggle-button","menu":["Components","Buttons","Icon toggle button"],"content":"Overview\n\nAn icon toggle button is used similarly to a checkbox or a radio button, but\nsupports a smaller interactive component that can be used to give a binary\nactive state choice to users that can be used alone or in combination with other\nchoices. A toggle button or icon toggle button gives a user a new way of\nvisualizing the information in the interface. It does not typically perform an\naction. Please use a button or an icon button for these uses.\n\nResources\n\nDeep dive into implementation d","_lower":{"title":"icon toggle button","description":"an interactive icon button that toggles between two binary states such as active and inactive.","tags":"component buttons toggle icon controls","content":"overview\n\nan icon toggle button is used similarly to a checkbox or a radio button, but\nsupports a smaller interactive component that can be used to give a binary\nactive state choice to users that can be used alone or in combination with other\nchoices. a toggle button or icon toggle button gives a user a new way of\nvisualizing the information in the interface. it does not typically perform an\naction. please use a button or an icon button for these uses.\n\nresources\n\ndeep dive into implementation d","combined":"icon toggle button an interactive icon button that toggles between two binary states such as active and inactive. component buttons toggle icon controls overview\n\nan icon toggle button is used similarly to a checkbox or a radio button, but\nsupports a smaller interactive component that can be used to give a binary\nactive state choice to users that can be used alone or in combination with other\nchoices. a toggle button or icon toggle button gives a user a new way of\nvisualizing the information in the interface. it does not typically perform an\naction. please use a button or an icon button for these uses.\n\nresources\n\ndeep dive into implementation d","titleNoSpaces":"icontogglebutton","descriptionNoSpaces":"aninteractiveiconbuttonthattogglesbetweentwobinarystatessuchasactiveandinactive.","tagsNoSpaces":"componentbuttonstoggleiconcontrols","titleWords":["icon","toggle","button"],"descriptionWords":["an","interactive","icon","button","that","toggles","between","two","binary","states","such","as","active","and","inactive."],"tagsWords":["component","buttons","toggle","icon","controls"]}},{"id":"Components-Image","title":"Image","exportName":"Image","description":"An image component is used to display visual content like photographs, illustrations, or graphics within the UI to support, illustrate, or enhance textual information.","tags":["component","image","picture","media"],"route":"components/media/image","menu":["Components","Media","Image"],"content":"Overview\n\nThe image component offers core features designed for optimal performance,\naccessibility, and responsiveness when displaying visual content.\n\nBasic functions\n\n``jsx live\nconst App = () => (\n  <Image\n    src=\"/images/image/image-sample.png\"\n    alt=\"Example image showing basic functionality\"\n    width=\"100%\"\n    maxWidth=\"9600\"\n  />\n)\n`\n\n- Source set (srcSet) and sizes: This allows the component to define\n  multiple image sources at different resolutions, enabling the browser to\n  autom","_lower":{"title":"image","description":"an image component is used to display visual content like photographs, illustrations, or graphics within the ui to support, illustrate, or enhance textual information.","tags":"component image picture media","content":"overview\n\nthe image component offers core features designed for optimal performance,\naccessibility, and responsiveness when displaying visual content.\n\nbasic functions\n\n``jsx live\nconst app = () => (\n  <image\n    src=\"/images/image/image-sample.png\"\n    alt=\"example image showing basic functionality\"\n    width=\"100%\"\n    maxwidth=\"9600\"\n  />\n)\n`\n\n- source set (srcset) and sizes: this allows the component to define\n  multiple image sources at different resolutions, enabling the browser to\n  autom","combined":"image an image component is used to display visual content like photographs, illustrations, or graphics within the ui to support, illustrate, or enhance textual information. component image picture media overview\n\nthe image component offers core features designed for optimal performance,\naccessibility, and responsiveness when displaying visual content.\n\nbasic functions\n\n``jsx live\nconst app = () => (\n  <image\n    src=\"/images/image/image-sample.png\"\n    alt=\"example image showing basic functionality\"\n    width=\"100%\"\n    maxwidth=\"9600\"\n  />\n)\n`\n\n- source set (srcset) and sizes: this allows the component to define\n  multiple image sources at different resolutions, enabling the browser to\n  autom","titleNoSpaces":"image","descriptionNoSpaces":"animagecomponentisusedtodisplayvisualcontentlikephotographs,illustrations,orgraphicswithintheuitosupport,illustrate,orenhancetextualinformation.","tagsNoSpaces":"componentimagepicturemedia","titleWords":["image"],"descriptionWords":["an","image","component","is","used","to","display","visual","content","like","photographs,","illustrations,","or","graphics","within","the","ui","to","support,","illustrate,","or","enhance","textual","information."],"tagsWords":["component","image","picture","media"]}},{"id":"Components-InlineSvg","title":"Inline svg","exportName":"InlineSvg","description":"The InlineSvg component allows you to render arbitrary SVG markup as an icon with built-in XSS protection. It sanitizes the provided SVG string to remove potentially dangerous elements and attributes before rendering.","tags":["component","svg","icon","inline","security"],"route":"components/media/inline-svg","menu":["Components","Media","Inline svg"],"content":"Key features\n\n- Security First: Automatic sanitization of SVG content to prevent XSS\n  attacks\n- API Compatible: Drop-in replacement for existing InlineSvg implementations\n- Accessibility: Support for title and description elements\n- Consistent Styling: Uses the same recipe system as the Icon component\n- Performance: Memoized sanitization for optimal re-renders\n- Zero External Dependencies: Uses native browser APIs for parsing and\n  sanitization\n\nBasic usage\n\n``jsx live\nconst App = () => {\n  con","_lower":{"title":"inline svg","description":"the inlinesvg component allows you to render arbitrary svg markup as an icon with built-in xss protection. it sanitizes the provided svg string to remove potentially dangerous elements and attributes before rendering.","tags":"component svg icon inline security","content":"key features\n\n- security first: automatic sanitization of svg content to prevent xss\n  attacks\n- api compatible: drop-in replacement for existing inlinesvg implementations\n- accessibility: support for title and description elements\n- consistent styling: uses the same recipe system as the icon component\n- performance: memoized sanitization for optimal re-renders\n- zero external dependencies: uses native browser apis for parsing and\n  sanitization\n\nbasic usage\n\n``jsx live\nconst app = () => {\n  con","combined":"inline svg the inlinesvg component allows you to render arbitrary svg markup as an icon with built-in xss protection. it sanitizes the provided svg string to remove potentially dangerous elements and attributes before rendering. component svg icon inline security key features\n\n- security first: automatic sanitization of svg content to prevent xss\n  attacks\n- api compatible: drop-in replacement for existing inlinesvg implementations\n- accessibility: support for title and description elements\n- consistent styling: uses the same recipe system as the icon component\n- performance: memoized sanitization for optimal re-renders\n- zero external dependencies: uses native browser apis for parsing and\n  sanitization\n\nbasic usage\n\n``jsx live\nconst app = () => {\n  con","titleNoSpaces":"inlinesvg","descriptionNoSpaces":"theinlinesvgcomponentallowsyoutorenderarbitrarysvgmarkupasaniconwithbuilt-inxssprotection.itsanitizestheprovidedsvgstringtoremovepotentiallydangerouselementsandattributesbeforerendering.","tagsNoSpaces":"componentsvgiconinlinesecurity","titleWords":["inline","svg"],"descriptionWords":["the","inlinesvg","component","allows","you","to","render","arbitrary","svg","markup","as","an","icon","with","built-in","xss","protection.","it","sanitizes","the","provided","svg","string","to","remove","potentially","dangerous","elements","and","attributes","before","rendering."],"tagsWords":["component","svg","icon","inline","security"]}},{"id":"Components-Inputs","title":"Inputs","description":"Form controls for data entry and selection","tags":["forms"],"route":"components/inputs","menu":["Components","Inputs"],"content":"Inputs\n\nForm controls for data entry and selection.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"inputs","description":"form controls for data entry and selection","tags":"forms","content":"inputs\n\nform controls for data entry and selection.\n\n<categoryoverview variant=\"list\" />","combined":"inputs form controls for data entry and selection forms inputs\n\nform controls for data entry and selection.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"inputs","descriptionNoSpaces":"formcontrolsfordataentryandselection","tagsNoSpaces":"forms","titleWords":["inputs"],"descriptionWords":["form","controls","for","data","entry","and","selection"],"tagsWords":["forms"]}},{"id":"Components-Kbd","title":"Kbd","exportName":"Kbd","description":"The KBD component visually renders a keystroke or key combination to highlight it within textual instructions.","tags":["component","keyboard","key"],"route":"components/typography/kbd","menu":["Components","Typography","Kbd"],"content":"Overview\n\nThe keyboard key component provides semantic and visual representation for\nkeyboard input, such as a shortcut, key press, or command line input, ensuring\nclarity and consistency when providing user instructions.\n\nVariables\n\nGet familiar with the features.\n\nBasic\n\n``jsx live\nconst App = () => <Kbd>Ctrl</Kbd>\n`\n\nKey combinations\n\n`jsx live\nconst App = () => <div>Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy</div>\n``","_lower":{"title":"kbd","description":"the kbd component visually renders a keystroke or key combination to highlight it within textual instructions.","tags":"component keyboard key","content":"overview\n\nthe keyboard key component provides semantic and visual representation for\nkeyboard input, such as a shortcut, key press, or command line input, ensuring\nclarity and consistency when providing user instructions.\n\nvariables\n\nget familiar with the features.\n\nbasic\n\n``jsx live\nconst app = () => <kbd>ctrl</kbd>\n`\n\nkey combinations\n\n`jsx live\nconst app = () => <div>press <kbd>ctrl</kbd> + <kbd>c</kbd> to copy</div>\n``","combined":"kbd the kbd component visually renders a keystroke or key combination to highlight it within textual instructions. component keyboard key overview\n\nthe keyboard key component provides semantic and visual representation for\nkeyboard input, such as a shortcut, key press, or command line input, ensuring\nclarity and consistency when providing user instructions.\n\nvariables\n\nget familiar with the features.\n\nbasic\n\n``jsx live\nconst app = () => <kbd>ctrl</kbd>\n`\n\nkey combinations\n\n`jsx live\nconst app = () => <div>press <kbd>ctrl</kbd> + <kbd>c</kbd> to copy</div>\n``","titleNoSpaces":"kbd","descriptionNoSpaces":"thekbdcomponentvisuallyrendersakeystrokeorkeycombinationtohighlightitwithintextualinstructions.","tagsNoSpaces":"componentkeyboardkey","titleWords":["kbd"],"descriptionWords":["the","kbd","component","visually","renders","a","keystroke","or","key","combination","to","highlight","it","within","textual","instructions."],"tagsWords":["component","keyboard","key"]}},{"id":"Components-link","title":"Link","exportName":"Link","description":"A link is a clickable element that navigates users to another page, section of the page, or resource, and is visually distinguished by styling.","tags":["component","link","anchor","navigation","href"],"route":"components/navigation/link","menu":["Components","Navigation","Link"],"content":"Overview\n\nThe link is flexible to many uses and matching text styles for common\nplacements. Most commonly used in dialog boxes, alerts, and within body copy.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact ARIA\nARIA Pattern\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nSize and text styling\n\nLinks should be within text, and should take on that styling when used, and\nprovide the additional link stylings to let the user know that the text","_lower":{"title":"link","description":"a link is a clickable element that navigates users to another page, section of the page, or resource, and is visually distinguished by styling.","tags":"component link anchor navigation href","content":"overview\n\nthe link is flexible to many uses and matching text styles for common\nplacements. most commonly used in dialog boxes, alerts, and within body copy.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize and text styling\n\nlinks should be within text, and should take on that styling when used, and\nprovide the additional link stylings to let the user know that the text","combined":"link a link is a clickable element that navigates users to another page, section of the page, or resource, and is visually distinguished by styling. component link anchor navigation href overview\n\nthe link is flexible to many uses and matching text styles for common\nplacements. most commonly used in dialog boxes, alerts, and within body copy.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nsize and text styling\n\nlinks should be within text, and should take on that styling when used, and\nprovide the additional link stylings to let the user know that the text","titleNoSpaces":"link","descriptionNoSpaces":"alinkisaclickableelementthatnavigatesuserstoanotherpage,sectionofthepage,orresource,andisvisuallydistinguishedbystyling.","tagsNoSpaces":"componentlinkanchornavigationhref","titleWords":["link"],"descriptionWords":["a","link","is","a","clickable","element","that","navigates","users","to","another","page,","section","of","the","page,","or","resource,","and","is","visually","distinguished","by","styling."],"tagsWords":["component","link","anchor","navigation","href"]}},{"id":"Components-List","title":"List","exportName":"List","description":"The list component organizes related items or data into a vertical, scannable format.","tags":["component","list","collections","ordered","unordered"],"route":"components/typography/list","menu":["Components","Typography","List"],"content":"Overview\n\nThe list component presents structured content which can include details such as\ntext, icons, and actions, in a vertical arrangement. With improved readability\nletting readers quickly scan the content and compare relevant details.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nW3C: Lists\nChakra UI: List\n\nVariables\n\nGet familiar with the features.\n\nBasic options\n\nVertical lists\n\nVertical lists can function differently based on need. Using bullet","_lower":{"title":"list","description":"the list component organizes related items or data into a vertical, scannable format.","tags":"component list collections ordered unordered","content":"overview\n\nthe list component presents structured content which can include details such as\ntext, icons, and actions, in a vertical arrangement. with improved readability\nletting readers quickly scan the content and compare relevant details.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nw3c: lists\nchakra ui: list\n\nvariables\n\nget familiar with the features.\n\nbasic options\n\nvertical lists\n\nvertical lists can function differently based on need. using bullet","combined":"list the list component organizes related items or data into a vertical, scannable format. component list collections ordered unordered overview\n\nthe list component presents structured content which can include details such as\ntext, icons, and actions, in a vertical arrangement. with improved readability\nletting readers quickly scan the content and compare relevant details.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nw3c: lists\nchakra ui: list\n\nvariables\n\nget familiar with the features.\n\nbasic options\n\nvertical lists\n\nvertical lists can function differently based on need. using bullet","titleNoSpaces":"list","descriptionNoSpaces":"thelistcomponentorganizesrelateditemsordataintoavertical,scannableformat.","tagsNoSpaces":"componentlistcollectionsorderedunordered","titleWords":["list"],"descriptionWords":["the","list","component","organizes","related","items","or","data","into","a","vertical,","scannable","format."],"tagsWords":["component","list","collections","ordered","unordered"]}},{"id":"Components-LoadingSpinner","title":"Loading spinner","exportName":"LoadingSpinner","description":"A circular visual indicator that displays the loading status of an ongoing process. It can represent either determinate or indeterminate progress.","tags":["component","loading","spinner","progress"],"route":"components/feedback/loading-spinner","menu":["Components","Feedback","Loading spinner"],"content":"Overview\n\nA loading spinner's primary usage is to visually communicate to the user that a\nprocess is ongoing and that they need to wait. It indicates that the system is\nworking and prevents the user from thinking the application is frozen or\nunresponsive.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisuals\n\nOn white background\n\nMost common, this is the default spinner animation to be used on w","_lower":{"title":"loading spinner","description":"a circular visual indicator that displays the loading status of an ongoing process. it can represent either determinate or indeterminate progress.","tags":"component loading spinner progress","content":"overview\n\na loading spinner's primary usage is to visually communicate to the user that a\nprocess is ongoing and that they need to wait. it indicates that the system is\nworking and prevents the user from thinking the application is frozen or\nunresponsive.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\non white background\n\nmost common, this is the default spinner animation to be used on w","combined":"loading spinner a circular visual indicator that displays the loading status of an ongoing process. it can represent either determinate or indeterminate progress. component loading spinner progress overview\n\na loading spinner's primary usage is to visually communicate to the user that a\nprocess is ongoing and that they need to wait. it indicates that the system is\nworking and prevents the user from thinking the application is frozen or\nunresponsive.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\non white background\n\nmost common, this is the default spinner animation to be used on w","titleNoSpaces":"loadingspinner","descriptionNoSpaces":"acircularvisualindicatorthatdisplaystheloadingstatusofanongoingprocess.itcanrepresenteitherdeterminateorindeterminateprogress.","tagsNoSpaces":"componentloadingspinnerprogress","titleWords":["loading","spinner"],"descriptionWords":["a","circular","visual","indicator","that","displays","the","loading","status","of","an","ongoing","process.","it","can","represent","either","determinate","or","indeterminate","progress."],"tagsWords":["component","loading","spinner","progress"]}},{"id":"Components-LocalizedField","title":"Localized field","exportName":"LocalizedField","description":"A localized field is a single component that enables users to input and manage content for multiple language versions of a piece of data within one unified form area.","tags":["component","form","l10n","i18n","localization"],"route":"components/forms/localized-field","menu":["Components","Forms","Localized field"],"content":"Overview\n\nThe localized field component serves as a container that displays and manages\ncontent across various defined locales. It minimizes clutter by allowing users\nto toggle between language versions using a control while ensuring that the data\nfor each specified locale is correctly captured, validated, and stored in the\napplication.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nSiz","_lower":{"title":"localized field","description":"a localized field is a single component that enables users to input and manage content for multiple language versions of a piece of data within one unified form area.","tags":"component form l10n i18n localization","content":"overview\n\nthe localized field component serves as a container that displays and manages\ncontent across various defined locales. it minimizes clutter by allowing users\nto toggle between language versions using a control while ensuring that the data\nfor each specified locale is correctly captured, validated, and stored in the\napplication.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nsiz","combined":"localized field a localized field is a single component that enables users to input and manage content for multiple language versions of a piece of data within one unified form area. component form l10n i18n localization overview\n\nthe localized field component serves as a container that displays and manages\ncontent across various defined locales. it minimizes clutter by allowing users\nto toggle between language versions using a control while ensuring that the data\nfor each specified locale is correctly captured, validated, and stored in the\napplication.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nsiz","titleNoSpaces":"localizedfield","descriptionNoSpaces":"alocalizedfieldisasinglecomponentthatenablesuserstoinputandmanagecontentformultiplelanguageversionsofapieceofdatawithinoneunifiedformarea.","tagsNoSpaces":"componentforml10ni18nlocalization","titleWords":["localized","field"],"descriptionWords":["a","localized","field","is","a","single","component","that","enables","users","to","input","and","manage","content","for","multiple","language","versions","of","a","piece","of","data","within","one","unified","form","area."],"tagsWords":["component","form","l10n","i18n","localization"]}},{"id":"Components-Menu","title":"Menu","exportName":"Menu","description":"A temporary surface that displays a list of choices or actions. It typically appears when a user interacts with an element like a button or icon, or performs a specific action.","tags":["component","menu","dropdown","actions","context menu"],"route":"components/navigation/menu","menu":["Components","Navigation","Menu"],"content":"Overview\n\nMenus present short, actionable items in a vertical list, ensuring easy\nnavigation and selection. They display below the trigger with a 8px space. To\nclose a menu, a user makes a selection, or in the case several selections may be\nmade, after a confirm button or a click off the active area.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact ARIA\nARIA Pattern\nFigma library","_lower":{"title":"menu","description":"a temporary surface that displays a list of choices or actions. it typically appears when a user interacts with an element like a button or icon, or performs a specific action.","tags":"component menu dropdown actions context menu","content":"overview\n\nmenus present short, actionable items in a vertical list, ensuring easy\nnavigation and selection. they display below the trigger with a 8px space. to\nclose a menu, a user makes a selection, or in the case several selections may be\nmade, after a confirm button or a click off the active area.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library","combined":"menu a temporary surface that displays a list of choices or actions. it typically appears when a user interacts with an element like a button or icon, or performs a specific action. component menu dropdown actions context menu overview\n\nmenus present short, actionable items in a vertical list, ensuring easy\nnavigation and selection. they display below the trigger with a 8px space. to\nclose a menu, a user makes a selection, or in the case several selections may be\nmade, after a confirm button or a click off the active area.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\naria pattern\nfigma library","titleNoSpaces":"menu","descriptionNoSpaces":"atemporarysurfacethatdisplaysalistofchoicesoractions.ittypicallyappearswhenauserinteractswithanelementlikeabuttonoricon,orperformsaspecificaction.","tagsNoSpaces":"componentmenudropdownactionscontextmenu","titleWords":["menu"],"descriptionWords":["a","temporary","surface","that","displays","a","list","of","choices","or","actions.","it","typically","appears","when","a","user","interacts","with","an","element","like","a","button","or","icon,","or","performs","a","specific","action."],"tagsWords":["component","menu","dropdown","actions","context","menu"]}},{"id":"Components-ModalPage","title":"ModalPage","exportName":"ModalPage","description":"A fullscreen modal overlay for form, info, and tabular page patterns. Provides a structured compound component API for complex editing and detail workflows in Merchant Center.","tags":["component","overlay","modal","page","dialog","fullscreen"],"route":"components/layout/modalpage","menu":["Components","Layout","ModalPage"],"content":"Overview\n\nModalPage is a fullscreen overlay that covers nearly the entire viewport,\nproviding a dedicated context for complex workflows. It is the Nimbus\nequivalent of the Merchant Center Application Kit's modal page patterns\n(form, info, and tabular variants).\n\nUnlike a regular Drawer, ModalPage has a fixed, structured layout with a\ntop navigation bar, header, scrollable content area, and optional footer.\nIt is always controlled — consumers manage the open state with isOpen and\nonClose.\n\nKey fe","_lower":{"title":"modalpage","description":"a fullscreen modal overlay for form, info, and tabular page patterns. provides a structured compound component api for complex editing and detail workflows in merchant center.","tags":"component overlay modal page dialog fullscreen","content":"overview\n\nmodalpage is a fullscreen overlay that covers nearly the entire viewport,\nproviding a dedicated context for complex workflows. it is the nimbus\nequivalent of the merchant center application kit's modal page patterns\n(form, info, and tabular variants).\n\nunlike a regular drawer, modalpage has a fixed, structured layout with a\ntop navigation bar, header, scrollable content area, and optional footer.\nit is always controlled — consumers manage the open state with isopen and\nonclose.\n\nkey fe","combined":"modalpage a fullscreen modal overlay for form, info, and tabular page patterns. provides a structured compound component api for complex editing and detail workflows in merchant center. component overlay modal page dialog fullscreen overview\n\nmodalpage is a fullscreen overlay that covers nearly the entire viewport,\nproviding a dedicated context for complex workflows. it is the nimbus\nequivalent of the merchant center application kit's modal page patterns\n(form, info, and tabular variants).\n\nunlike a regular drawer, modalpage has a fixed, structured layout with a\ntop navigation bar, header, scrollable content area, and optional footer.\nit is always controlled — consumers manage the open state with isopen and\nonclose.\n\nkey fe","titleNoSpaces":"modalpage","descriptionNoSpaces":"afullscreenmodaloverlayforform,info,andtabularpagepatterns.providesastructuredcompoundcomponentapiforcomplexeditinganddetailworkflowsinmerchantcenter.","tagsNoSpaces":"componentoverlaymodalpagedialogfullscreen","titleWords":["modalpage"],"descriptionWords":["a","fullscreen","modal","overlay","for","form,","info,","and","tabular","page","patterns.","provides","a","structured","compound","component","api","for","complex","editing","and","detail","workflows","in","merchant","center."],"tagsWords":["component","overlay","modal","page","dialog","fullscreen"]}},{"id":"Components-MoneyInput","title":"Money input","exportName":"MoneyInput","description":"A controlled input for money values that combines currency selection with amount input, supporting both standard and high-precision monetary values.","tags":["component","input","currency","money"],"route":"components/inputs/money-input","menu":["Components","Inputs","Money input"],"content":"Overview\n\nThe money input component combines a currency selector (a dropdown menu) and a\nnumerical input field into a single, cohesive unit, offering robust states like\ndefault, invalid, and disabled, alongside specialized handling for focused and\nhovered interactions.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact Aria Docs\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nAnatomy\n\nMulti-part functions\n\nIn each localized money input, ther","_lower":{"title":"money input","description":"a controlled input for money values that combines currency selection with amount input, supporting both standard and high-precision monetary values.","tags":"component input currency money","content":"overview\n\nthe money input component combines a currency selector (a dropdown menu) and a\nnumerical input field into a single, cohesive unit, offering robust states like\ndefault, invalid, and disabled, alongside specialized handling for focused and\nhovered interactions.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria docs\nfigma library\n\nvariables\n\nget familiar with the features.\n\nanatomy\n\nmulti-part functions\n\nin each localized money input, ther","combined":"money input a controlled input for money values that combines currency selection with amount input, supporting both standard and high-precision monetary values. component input currency money overview\n\nthe money input component combines a currency selector (a dropdown menu) and a\nnumerical input field into a single, cohesive unit, offering robust states like\ndefault, invalid, and disabled, alongside specialized handling for focused and\nhovered interactions.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria docs\nfigma library\n\nvariables\n\nget familiar with the features.\n\nanatomy\n\nmulti-part functions\n\nin each localized money input, ther","titleNoSpaces":"moneyinput","descriptionNoSpaces":"acontrolledinputformoneyvaluesthatcombinescurrencyselectionwithamountinput,supportingbothstandardandhigh-precisionmonetaryvalues.","tagsNoSpaces":"componentinputcurrencymoney","titleWords":["money","input"],"descriptionWords":["a","controlled","input","for","money","values","that","combines","currency","selection","with","amount","input,","supporting","both","standard","and","high-precision","monetary","values."],"tagsWords":["component","input","currency","money"]}},{"id":"Components-MultilineTextInput","title":"Multiline text input","exportName":"MultilineTextInput","description":"A multi-line text input allows users to enter longer blocks of text across multiple lines. It is suitable for paragraphs, descriptions, or any input requiring more than a single line.","tags":["component","form"],"route":"components/inputs/multiline-text-input","menu":["Components","Inputs","Multiline text input"],"content":"Overview\n\nA multi-line text input allows users to enter multiple lines of text. It expands\nvertically to accommodate more content.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma Library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nThis component supports different sizes, medium (default) and small (for compact\nuses).\n\nSizes\n\n``jsx live\nconst App = () => (\n <Stack direction=\"row\" gap=\"400\" alignItems=\"flex-start\">\n    <MultilineTextI","_lower":{"title":"multiline text input","description":"a multi-line text input allows users to enter longer blocks of text across multiple lines. it is suitable for paragraphs, descriptions, or any input requiring more than a single line.","tags":"component form","content":"overview\n\na multi-line text input allows users to enter multiple lines of text. it expands\nvertically to accommodate more content.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nthis component supports different sizes, medium (default) and small (for compact\nuses).\n\nsizes\n\n``jsx live\nconst app = () => (\n <stack direction=\"row\" gap=\"400\" alignitems=\"flex-start\">\n    <multilinetexti","combined":"multiline text input a multi-line text input allows users to enter longer blocks of text across multiple lines. it is suitable for paragraphs, descriptions, or any input requiring more than a single line. component form overview\n\na multi-line text input allows users to enter multiple lines of text. it expands\nvertically to accommodate more content.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nthis component supports different sizes, medium (default) and small (for compact\nuses).\n\nsizes\n\n``jsx live\nconst app = () => (\n <stack direction=\"row\" gap=\"400\" alignitems=\"flex-start\">\n    <multilinetexti","titleNoSpaces":"multilinetextinput","descriptionNoSpaces":"amulti-linetextinputallowsuserstoenterlongerblocksoftextacrossmultiplelines.itissuitableforparagraphs,descriptions,oranyinputrequiringmorethanasingleline.","tagsNoSpaces":"componentform","titleWords":["multiline","text","input"],"descriptionWords":["a","multi-line","text","input","allows","users","to","enter","longer","blocks","of","text","across","multiple","lines.","it","is","suitable","for","paragraphs,","descriptions,","or","any","input","requiring","more","than","a","single","line."],"tagsWords":["component","form"]}},{"id":"Components-Naivgation","title":"Navigation","description":"Components for moving through an application.","tags":["document"],"route":"components/navigation","menu":["Components","Navigation"],"content":"Navigation\n\nComponents for navigating through an application.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"navigation","description":"components for moving through an application.","tags":"document","content":"navigation\n\ncomponents for navigating through an application.\n\n<categoryoverview variant=\"list\" />","combined":"navigation components for moving through an application. document navigation\n\ncomponents for navigating through an application.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"navigation","descriptionNoSpaces":"componentsformovingthroughanapplication.","tagsNoSpaces":"document","titleWords":["navigation"],"descriptionWords":["components","for","moving","through","an","application."],"tagsWords":["document"]}},{"id":"Components-NimbusI18nProvider","title":"Nimbus i18n provider","exportName":"NimbusI18nProvider","description":"The NimbusI18nProvider component provides internationalization (i18n) context for React Aria components in your Nimbus application. It controls how dates, numbers, and other locale-specific content is formatted across all React Aria-based components.","tags":["component","i18n","internationalization","provider","react-aria"],"route":"components/utilities/nimbus-i18n-provider","menu":["Components","Utilities","Nimbus i18n provider"],"content":"Overview\n\nNimbusI18nProvider is a proxy component that wraps React Aria's I18nProvider,\nmaking it easy to set the locale for all React Aria components like DatePicker,\nCalendar, and NumberInput. This ensures consistent formatting across your\napplication.\n\nKey features\n\n- Locale-aware formatting: Controls date, number, and currency formatting\n  based on locale\n- React Aria integration: Built specifically for React Aria components\n- BCP47 locale codes: Supports standard language-region codes (e.g.","_lower":{"title":"nimbus i18n provider","description":"the nimbusi18nprovider component provides internationalization (i18n) context for react aria components in your nimbus application. it controls how dates, numbers, and other locale-specific content is formatted across all react aria-based components.","tags":"component i18n internationalization provider react-aria","content":"overview\n\nnimbusi18nprovider is a proxy component that wraps react aria's i18nprovider,\nmaking it easy to set the locale for all react aria components like datepicker,\ncalendar, and numberinput. this ensures consistent formatting across your\napplication.\n\nkey features\n\n- locale-aware formatting: controls date, number, and currency formatting\n  based on locale\n- react aria integration: built specifically for react aria components\n- bcp47 locale codes: supports standard language-region codes (e.g.","combined":"nimbus i18n provider the nimbusi18nprovider component provides internationalization (i18n) context for react aria components in your nimbus application. it controls how dates, numbers, and other locale-specific content is formatted across all react aria-based components. component i18n internationalization provider react-aria overview\n\nnimbusi18nprovider is a proxy component that wraps react aria's i18nprovider,\nmaking it easy to set the locale for all react aria components like datepicker,\ncalendar, and numberinput. this ensures consistent formatting across your\napplication.\n\nkey features\n\n- locale-aware formatting: controls date, number, and currency formatting\n  based on locale\n- react aria integration: built specifically for react aria components\n- bcp47 locale codes: supports standard language-region codes (e.g.","titleNoSpaces":"nimbusi18nprovider","descriptionNoSpaces":"thenimbusi18nprovidercomponentprovidesinternationalization(i18n)contextforreactariacomponentsinyournimbusapplication.itcontrolshowdates,numbers,andotherlocale-specificcontentisformattedacrossallreactaria-basedcomponents.","tagsNoSpaces":"componenti18ninternationalizationproviderreact-aria","titleWords":["nimbus","i18n","provider"],"descriptionWords":["the","nimbusi18nprovider","component","provides","internationalization","(i18n)","context","for","react","aria","components","in","your","nimbus","application.","it","controls","how","dates,","numbers,","and","other","locale-specific","content","is","formatted","across","all","react","aria-based","components."],"tagsWords":["component","i18n","internationalization","provider","react-aria"]}},{"id":"Components-NimbusProvider","title":"Nimbus provider","exportName":"NimbusProvider","description":"The NimbusProvider component is a required wrapper that provides theming, internationalization, and routing context for all Nimbus components. It must be placed at the root of your application.","tags":["component","system","provider","setup","theme"],"route":"components/utilities/nimbus-provider","menu":["Components","Utilities","Nimbus provider"],"content":"When to use\n\nRequired setup: Every application using Nimbus components must include NimbusProvider at the root level. Without it, Nimbus components will not function.\n\nBasic usage\n\n``tsx\nimport { NimbusProvider } from \"@commercetools/nimbus\";\n\nfunction App() {\n  return (\n    <NimbusProvider>\n      <YourApp />\n    </NimbusProvider>\n  );\n}\n`\n\nConfiguration options\n\nLocale\n\nSet the locale for all Nimbus components using a BCP47 language tag (e.g., \"en\", \"de-DE\", \"fr-FR\"). NimbusProvider accepts the","_lower":{"title":"nimbus provider","description":"the nimbusprovider component is a required wrapper that provides theming, internationalization, and routing context for all nimbus components. it must be placed at the root of your application.","tags":"component system provider setup theme","content":"when to use\n\nrequired setup: every application using nimbus components must include nimbusprovider at the root level. without it, nimbus components will not function.\n\nbasic usage\n\n``tsx\nimport { nimbusprovider } from \"@commercetools/nimbus\";\n\nfunction app() {\n  return (\n    <nimbusprovider>\n      <yourapp />\n    </nimbusprovider>\n  );\n}\n`\n\nconfiguration options\n\nlocale\n\nset the locale for all nimbus components using a bcp47 language tag (e.g., \"en\", \"de-de\", \"fr-fr\"). nimbusprovider accepts the","combined":"nimbus provider the nimbusprovider component is a required wrapper that provides theming, internationalization, and routing context for all nimbus components. it must be placed at the root of your application. component system provider setup theme when to use\n\nrequired setup: every application using nimbus components must include nimbusprovider at the root level. without it, nimbus components will not function.\n\nbasic usage\n\n``tsx\nimport { nimbusprovider } from \"@commercetools/nimbus\";\n\nfunction app() {\n  return (\n    <nimbusprovider>\n      <yourapp />\n    </nimbusprovider>\n  );\n}\n`\n\nconfiguration options\n\nlocale\n\nset the locale for all nimbus components using a bcp47 language tag (e.g., \"en\", \"de-de\", \"fr-fr\"). nimbusprovider accepts the","titleNoSpaces":"nimbusprovider","descriptionNoSpaces":"thenimbusprovidercomponentisarequiredwrapperthatprovidestheming,internationalization,androutingcontextforallnimbuscomponents.itmustbeplacedattherootofyourapplication.","tagsNoSpaces":"componentsystemprovidersetuptheme","titleWords":["nimbus","provider"],"descriptionWords":["the","nimbusprovider","component","is","a","required","wrapper","that","provides","theming,","internationalization,","and","routing","context","for","all","nimbus","components.","it","must","be","placed","at","the","root","of","your","application."],"tagsWords":["component","system","provider","setup","theme"]}},{"id":"Components-NumberInput","title":"Number input","exportName":"NumberInput","description":"A number input allows users to enter numerical values and adjust them incrementally.","tags":["component","number","input","numeric","stepper"],"route":"components/inputs/number-input","menu":["Components","Inputs","Number input"],"content":"Overview\n\nA number input allows users to enter a numeric value and adjust it using stepper\nbuttons. It provides a quick and precise way to modify values within defined\nparameters, especially for small incremental changes.\n\nKey features\n\n- Value Clamping: If a user types a value outside the defined min or max\n  range, the value will snap to the nearest valid step or the min/max value on\n  blur.\n- Decimals: Supports decimal values and step sizes.\n- Percentages: Can be configured to display values ","_lower":{"title":"number input","description":"a number input allows users to enter numerical values and adjust them incrementally.","tags":"component number input numeric stepper","content":"overview\n\na number input allows users to enter a numeric value and adjust it using stepper\nbuttons. it provides a quick and precise way to modify values within defined\nparameters, especially for small incremental changes.\n\nkey features\n\n- value clamping: if a user types a value outside the defined min or max\n  range, the value will snap to the nearest valid step or the min/max value on\n  blur.\n- decimals: supports decimal values and step sizes.\n- percentages: can be configured to display values ","combined":"number input a number input allows users to enter numerical values and adjust them incrementally. component number input numeric stepper overview\n\na number input allows users to enter a numeric value and adjust it using stepper\nbuttons. it provides a quick and precise way to modify values within defined\nparameters, especially for small incremental changes.\n\nkey features\n\n- value clamping: if a user types a value outside the defined min or max\n  range, the value will snap to the nearest valid step or the min/max value on\n  blur.\n- decimals: supports decimal values and step sizes.\n- percentages: can be configured to display values ","titleNoSpaces":"numberinput","descriptionNoSpaces":"anumberinputallowsuserstoenternumericalvaluesandadjustthemincrementally.","tagsNoSpaces":"componentnumberinputnumericstepper","titleWords":["number","input"],"descriptionWords":["a","number","input","allows","users","to","enter","numerical","values","and","adjust","them","incrementally."],"tagsWords":["component","number","input","numeric","stepper"]}},{"id":"Components-PageContent","title":"PageContent","exportName":"PageContent","description":"A layout component that constrains page content width and arranges content in single or multi-column layouts. It consolidates multiple width-based containers into a single compound component with explicit column control.","tags":["component","layout","page-content","columns","grid"],"route":"components/layout/pagecontent","menu":["Components","Layout","PageContent"],"content":"Overview\n\nPageContent provides a CSS grid-based centering pattern with configurable\nmax-width constraints and column layouts. It supports three width variants\n(wide, narrow, full) and three column configurations (single, equal split, and\n2:1 ratio) with built-in responsive collapse for multi-column layouts.\n\nKey features\n\n- Width constraints: Three variants control the max-width of the content\n  area\n- Column layouts: Single, equal-split (1/1), and sidebar (2/1) column\n  configurations\n- Respons","_lower":{"title":"pagecontent","description":"a layout component that constrains page content width and arranges content in single or multi-column layouts. it consolidates multiple width-based containers into a single compound component with explicit column control.","tags":"component layout page-content columns grid","content":"overview\n\npagecontent provides a css grid-based centering pattern with configurable\nmax-width constraints and column layouts. it supports three width variants\n(wide, narrow, full) and three column configurations (single, equal split, and\n2:1 ratio) with built-in responsive collapse for multi-column layouts.\n\nkey features\n\n- width constraints: three variants control the max-width of the content\n  area\n- column layouts: single, equal-split (1/1), and sidebar (2/1) column\n  configurations\n- respons","combined":"pagecontent a layout component that constrains page content width and arranges content in single or multi-column layouts. it consolidates multiple width-based containers into a single compound component with explicit column control. component layout page-content columns grid overview\n\npagecontent provides a css grid-based centering pattern with configurable\nmax-width constraints and column layouts. it supports three width variants\n(wide, narrow, full) and three column configurations (single, equal split, and\n2:1 ratio) with built-in responsive collapse for multi-column layouts.\n\nkey features\n\n- width constraints: three variants control the max-width of the content\n  area\n- column layouts: single, equal-split (1/1), and sidebar (2/1) column\n  configurations\n- respons","titleNoSpaces":"pagecontent","descriptionNoSpaces":"alayoutcomponentthatconstrainspagecontentwidthandarrangescontentinsingleormulti-columnlayouts.itconsolidatesmultiplewidth-basedcontainersintoasinglecompoundcomponentwithexplicitcolumncontrol.","tagsNoSpaces":"componentlayoutpage-contentcolumnsgrid","titleWords":["pagecontent"],"descriptionWords":["a","layout","component","that","constrains","page","content","width","and","arranges","content","in","single","or","multi-column","layouts.","it","consolidates","multiple","width-based","containers","into","a","single","compound","component","with","explicit","column","control."],"tagsWords":["component","layout","page-content","columns","grid"]}},{"id":"Components-Pagination","title":"Pagination","exportName":"Pagination","description":"Pagination is a component that divides a large set of content or data into sequential pages, providing navigation controls to move between them.","tags":["component","pagination","paging","navigation","pages"],"route":"components/navigation/pagination","menu":["Components","Navigation","Pagination"],"content":"Overview\n\nPagination contains controls for navigating with dedicated buttons for moving to the next and previous pages, visible page numbering for direct access, and clear feedback indicating the user's current page position within the total set of results.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisuals\n\nPage size selection paired with jump to page\n\nUse this combination for the most contr","_lower":{"title":"pagination","description":"pagination is a component that divides a large set of content or data into sequential pages, providing navigation controls to move between them.","tags":"component pagination paging navigation pages","content":"overview\n\npagination contains controls for navigating with dedicated buttons for moving to the next and previous pages, visible page numbering for direct access, and clear feedback indicating the user's current page position within the total set of results.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\npage size selection paired with jump to page\n\nuse this combination for the most contr","combined":"pagination pagination is a component that divides a large set of content or data into sequential pages, providing navigation controls to move between them. component pagination paging navigation pages overview\n\npagination contains controls for navigating with dedicated buttons for moving to the next and previous pages, visible page numbering for direct access, and clear feedback indicating the user's current page position within the total set of results.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\npage size selection paired with jump to page\n\nuse this combination for the most contr","titleNoSpaces":"pagination","descriptionNoSpaces":"paginationisacomponentthatdividesalargesetofcontentordataintosequentialpages,providingnavigationcontrolstomovebetweenthem.","tagsNoSpaces":"componentpaginationpagingnavigationpages","titleWords":["pagination"],"descriptionWords":["pagination","is","a","component","that","divides","a","large","set","of","content","or","data","into","sequential","pages,","providing","navigation","controls","to","move","between","them."],"tagsWords":["component","pagination","paging","navigation","pages"]}},{"id":"Components-PasswordInput","title":"Password input","exportName":"PasswordInput","description":"A password input is a text field that hides entered characters for secure password entry.","tags":["component","forms","password","input","secure"],"route":"components/inputs/password-input","menu":["Components","Inputs","Password input"],"content":"Overview\n\nPassword input guidelines focus on creating secure and user-friendly fields for\nentering sensitive credentials, emphasizing visual obscuring of input, clear\nlabeling and validation, accessibility considerations, and best practices for\npassword visibility toggles and error handling.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nMedium\n\n``jsx live\nconst App = () => <Passw","_lower":{"title":"password input","description":"a password input is a text field that hides entered characters for secure password entry.","tags":"component forms password input secure","content":"overview\n\npassword input guidelines focus on creating secure and user-friendly fields for\nentering sensitive credentials, emphasizing visual obscuring of input, clear\nlabeling and validation, accessibility considerations, and best practices for\npassword visibility toggles and error handling.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\nconst app = () => <passw","combined":"password input a password input is a text field that hides entered characters for secure password entry. component forms password input secure overview\n\npassword input guidelines focus on creating secure and user-friendly fields for\nentering sensitive credentials, emphasizing visual obscuring of input, clear\nlabeling and validation, accessibility considerations, and best practices for\npassword visibility toggles and error handling.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nmedium\n\n``jsx live\nconst app = () => <passw","titleNoSpaces":"passwordinput","descriptionNoSpaces":"apasswordinputisatextfieldthathidesenteredcharactersforsecurepasswordentry.","tagsNoSpaces":"componentformspasswordinputsecure","titleWords":["password","input"],"descriptionWords":["a","password","input","is","a","text","field","that","hides","entered","characters","for","secure","password","entry."],"tagsWords":["component","forms","password","input","secure"]}},{"id":"Components-ProgressBar","title":"Progress bar","exportName":"ProgressBar","description":"A linear visual indicator that displays the loading or completion state of an ongoing process. It can represent either determinate or indeterminate progress.","tags":["component","progress","loading"],"route":"components/feedback/progress-bar","menu":["Components","Feedback","Progress bar"],"content":"Overview\n\nA progress bar's primary usage is to visually communicate to the user that a\nprocess is ongoing. If used in combination with a flow or tasks, a progress bar\ncan give a visual indicator of where they currently are in the process and\nestimate how much is left to complete the task.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisuals\n\nOn white background\n\nMost common, progress bar is use","_lower":{"title":"progress bar","description":"a linear visual indicator that displays the loading or completion state of an ongoing process. it can represent either determinate or indeterminate progress.","tags":"component progress loading","content":"overview\n\na progress bar's primary usage is to visually communicate to the user that a\nprocess is ongoing. if used in combination with a flow or tasks, a progress bar\ncan give a visual indicator of where they currently are in the process and\nestimate how much is left to complete the task.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\non white background\n\nmost common, progress bar is use","combined":"progress bar a linear visual indicator that displays the loading or completion state of an ongoing process. it can represent either determinate or indeterminate progress. component progress loading overview\n\na progress bar's primary usage is to visually communicate to the user that a\nprocess is ongoing. if used in combination with a flow or tasks, a progress bar\ncan give a visual indicator of where they currently are in the process and\nestimate how much is left to complete the task.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\non white background\n\nmost common, progress bar is use","titleNoSpaces":"progressbar","descriptionNoSpaces":"alinearvisualindicatorthatdisplaystheloadingorcompletionstateofanongoingprocess.itcanrepresenteitherdeterminateorindeterminateprogress.","tagsNoSpaces":"componentprogressloading","titleWords":["progress","bar"],"descriptionWords":["a","linear","visual","indicator","that","displays","the","loading","or","completion","state","of","an","ongoing","process.","it","can","represent","either","determinate","or","indeterminate","progress."],"tagsWords":["component","progress","loading"]}},{"id":"Components-RadioInput","title":"Radio input","exportName":"RadioInput","description":"A set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.","tags":["component","radio","input","selection","option"],"route":"components/inputs/radio-input","menu":["Components","Inputs","Radio input"],"content":"Overview\n\nRadio inputs ensure users can easily select one option from a small, visible set\nof mutually exclusive choices with clear labels and visual feedback.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nDefault\n\n``jsx live\nconst App = () => (\n  <RadioInput.Root orientation=\"horizontal\" name=\"default-example\">\n    <RadioInput.Option value=\"option1\">Select me</RadioInput.Option>","_lower":{"title":"radio input","description":"a set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.","tags":"component radio input selection option","content":"overview\n\nradio inputs ensure users can easily select one option from a small, visible set\nof mutually exclusive choices with clear labels and visual feedback.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndefault\n\n``jsx live\nconst app = () => (\n  <radioinput.root orientation=\"horizontal\" name=\"default-example\">\n    <radioinput.option value=\"option1\">select me</radioinput.option>","combined":"radio input a set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access. component radio input selection option overview\n\nradio inputs ensure users can easily select one option from a small, visible set\nof mutually exclusive choices with clear labels and visual feedback.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndefault\n\n``jsx live\nconst app = () => (\n  <radioinput.root orientation=\"horizontal\" name=\"default-example\">\n    <radioinput.option value=\"option1\">select me</radioinput.option>","titleNoSpaces":"radioinput","descriptionNoSpaces":"asetofcloselyrelated,mutuallyexclusiveorcomplementaryactionsthatareimportantenoughtobedisplayeddirectlyintheinterfaceforquickaccess.","tagsNoSpaces":"componentradioinputselectionoption","titleWords":["radio","input"],"descriptionWords":["a","set","of","closely","related,","mutually","exclusive","or","complementary","actions","that","are","important","enough","to","be","displayed","directly","in","the","interface","for","quick","access."],"tagsWords":["component","radio","input","selection","option"]}},{"id":"Components-RangeCalendar","title":"Range calendar","exportName":"RangeCalendar","description":"Range calendar displays a grid of days in one or more months and allow users to select a range of dates.","tags":["component","calendar"],"route":"components/inputs/range-calendar","menu":["Components","Inputs","Range calendar"],"content":"Overview\n\nThe calendar component is most often used within the popover component when a\nuser interacts with a date input. Easily toggle, month, year, and select a\nrange.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nDate range\n\nAllow users to select a range of dates.\n\n``jsx live\nconst App = () => <RangeCalendar aria-label=\"Enter dates\" />\n``","_lower":{"title":"range calendar","description":"range calendar displays a grid of days in one or more months and allow users to select a range of dates.","tags":"component calendar","content":"overview\n\nthe calendar component is most often used within the popover component when a\nuser interacts with a date input. easily toggle, month, year, and select a\nrange.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndate range\n\nallow users to select a range of dates.\n\n``jsx live\nconst app = () => <rangecalendar aria-label=\"enter dates\" />\n``","combined":"range calendar range calendar displays a grid of days in one or more months and allow users to select a range of dates. component calendar overview\n\nthe calendar component is most often used within the popover component when a\nuser interacts with a date input. easily toggle, month, year, and select a\nrange.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\ndate range\n\nallow users to select a range of dates.\n\n``jsx live\nconst app = () => <rangecalendar aria-label=\"enter dates\" />\n``","titleNoSpaces":"rangecalendar","descriptionNoSpaces":"rangecalendardisplaysagridofdaysinoneormoremonthsandallowuserstoselectarangeofdates.","tagsNoSpaces":"componentcalendar","titleWords":["range","calendar"],"descriptionWords":["range","calendar","displays","a","grid","of","days","in","one","or","more","months","and","allow","users","to","select","a","range","of","dates."],"tagsWords":["component","calendar"]}},{"id":"Components-Region","title":"Region","exportName":"Region","description":"A headless primitive for named content projection — render content into a named region elsewhere in the layout while it stays in your React tree.","tags":["component","utility","portal","layout","provider"],"route":"components/utilities/region","menu":["Components","Utilities","Region"],"content":"Overview\n\nRegion is a headless primitive for named content projection: render content\ninto a slot somewhere else in the layout — an aside, a toolbar, a detail pane —\nfrom a component that lives somewhere else entirely, even a different package.\n\nIt is the structured form of createPortal. You place a target with\n<Region name=\"…\" /> to mark where a region renders, and fill it from\nanywhere with useRegion(name). Projected content paints at the target but stays\na child of its author in the React tre","_lower":{"title":"region","description":"a headless primitive for named content projection — render content into a named region elsewhere in the layout while it stays in your react tree.","tags":"component utility portal layout provider","content":"overview\n\nregion is a headless primitive for named content projection: render content\ninto a slot somewhere else in the layout — an aside, a toolbar, a detail pane —\nfrom a component that lives somewhere else entirely, even a different package.\n\nit is the structured form of createportal. you place a target with\n<region name=\"…\" /> to mark where a region renders, and fill it from\nanywhere with useregion(name). projected content paints at the target but stays\na child of its author in the react tre","combined":"region a headless primitive for named content projection — render content into a named region elsewhere in the layout while it stays in your react tree. component utility portal layout provider overview\n\nregion is a headless primitive for named content projection: render content\ninto a slot somewhere else in the layout — an aside, a toolbar, a detail pane —\nfrom a component that lives somewhere else entirely, even a different package.\n\nit is the structured form of createportal. you place a target with\n<region name=\"…\" /> to mark where a region renders, and fill it from\nanywhere with useregion(name). projected content paints at the target but stays\na child of its author in the react tre","titleNoSpaces":"region","descriptionNoSpaces":"aheadlessprimitivefornamedcontentprojection—rendercontentintoanamedregionelsewhereinthelayoutwhileitstaysinyourreacttree.","tagsNoSpaces":"componentutilityportallayoutprovider","titleWords":["region"],"descriptionWords":["a","headless","primitive","for","named","content","projection","—","render","content","into","a","named","region","elsewhere","in","the","layout","while","it","stays","in","your","react","tree."],"tagsWords":["component","utility","portal","layout","provider"]}},{"id":"Components-RichTextInput","title":"Rich text input","exportName":"RichTextInput","description":"The rich text input component allows users to input and format text using a user friendly interface. Changing standard text inputs into fully featured edits, supporting formatting, linking, and embedding.","tags":["component","rich-text","editor","formatting"],"route":"components/inputs/rich-text-input","menu":["Components","Inputs","Rich text input"],"content":"Overview\n\nRich text input is made of two parts, the input where users can add text, and a\ntoolbar. This toolbar has been arranged to suit user's needs for text editing.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nSlate.js Documentation\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nToolbar features\n\nUsers can change type styles, toggle bold, italics, underline, strikethrough,\ncode sections, superscript, subscript, bullet points and numbere","_lower":{"title":"rich text input","description":"the rich text input component allows users to input and format text using a user friendly interface. changing standard text inputs into fully featured edits, supporting formatting, linking, and embedding.","tags":"component rich-text editor formatting","content":"overview\n\nrich text input is made of two parts, the input where users can add text, and a\ntoolbar. this toolbar has been arranged to suit user's needs for text editing.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nslate.js documentation\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntoolbar features\n\nusers can change type styles, toggle bold, italics, underline, strikethrough,\ncode sections, superscript, subscript, bullet points and numbere","combined":"rich text input the rich text input component allows users to input and format text using a user friendly interface. changing standard text inputs into fully featured edits, supporting formatting, linking, and embedding. component rich-text editor formatting overview\n\nrich text input is made of two parts, the input where users can add text, and a\ntoolbar. this toolbar has been arranged to suit user's needs for text editing.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nslate.js documentation\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntoolbar features\n\nusers can change type styles, toggle bold, italics, underline, strikethrough,\ncode sections, superscript, subscript, bullet points and numbere","titleNoSpaces":"richtextinput","descriptionNoSpaces":"therichtextinputcomponentallowsuserstoinputandformattextusingauserfriendlyinterface.changingstandardtextinputsintofullyfeaturededits,supportingformatting,linking,andembedding.","tagsNoSpaces":"componentrich-texteditorformatting","titleWords":["rich","text","input"],"descriptionWords":["the","rich","text","input","component","allows","users","to","input","and","format","text","using","a","user","friendly","interface.","changing","standard","text","inputs","into","fully","featured","edits,","supporting","formatting,","linking,","and","embedding."],"tagsWords":["component","rich-text","editor","formatting"]}},{"id":"Components-ScopedSearchInput","title":"Scoped search input","exportName":"ScopedSearchInput","description":"Enables users to define where their search query is applied using a closely paired scope selector.","tags":["component","input","search","select","scoped"],"route":"components/inputs/scoped-search-input","menu":["Components","Inputs","Scoped search input"],"content":"Overview\n\nThe scoped search input combines an input field with a functional scope selector\n(often a dropdown or button group), ensuring users can precisely target their\nquery to a specific data segment, such as searching only 'Products' or only\n'Customers', yielding more accurate and relevant results.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nReact Aria SearchField\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nThere are two sizes,","_lower":{"title":"scoped search input","description":"enables users to define where their search query is applied using a closely paired scope selector.","tags":"component input search select scoped","content":"overview\n\nthe scoped search input combines an input field with a functional scope selector\n(often a dropdown or button group), ensuring users can precisely target their\nquery to a specific data segment, such as searching only 'products' or only\n'customers', yielding more accurate and relevant results.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nreact aria searchfield\n\nvariables\n\nget familiar with the features.\n\nsize\n\nthere are two sizes,","combined":"scoped search input enables users to define where their search query is applied using a closely paired scope selector. component input search select scoped overview\n\nthe scoped search input combines an input field with a functional scope selector\n(often a dropdown or button group), ensuring users can precisely target their\nquery to a specific data segment, such as searching only 'products' or only\n'customers', yielding more accurate and relevant results.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nreact aria searchfield\n\nvariables\n\nget familiar with the features.\n\nsize\n\nthere are two sizes,","titleNoSpaces":"scopedsearchinput","descriptionNoSpaces":"enablesuserstodefinewheretheirsearchqueryisappliedusingacloselypairedscopeselector.","tagsNoSpaces":"componentinputsearchselectscoped","titleWords":["scoped","search","input"],"descriptionWords":["enables","users","to","define","where","their","search","query","is","applied","using","a","closely","paired","scope","selector."],"tagsWords":["component","input","search","select","scoped"]}},{"id":"Components-ScrollArea","title":"ScrollArea","exportName":"ScrollArea","description":"A scrollable container with custom-styled scrollbar overlays. Useful for constrained content areas like panels, sidebars, and dialog bodies.","tags":["component","scroll-area","layout","overflow","scrollbar"],"route":"components/layout/scrollarea","menu":["Components","Layout","ScrollArea"],"content":"Overview\n\nScrollArea constrains content within a fixed region and provides themed\nscrollbar overlays that replace native browser scrollbars. The scrollbar\nappears on hover or during scrolling by default, keeping the interface clean\nuntil the user needs to scroll. The component is keyboard accessible — when\ncontent overflows, the area becomes focusable via Tab and scrollable with\narrow keys.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nStorybook\nChakra ","_lower":{"title":"scrollarea","description":"a scrollable container with custom-styled scrollbar overlays. useful for constrained content areas like panels, sidebars, and dialog bodies.","tags":"component scroll-area layout overflow scrollbar","content":"overview\n\nscrollarea constrains content within a fixed region and provides themed\nscrollbar overlays that replace native browser scrollbars. the scrollbar\nappears on hover or during scrolling by default, keeping the interface clean\nuntil the user needs to scroll. the component is keyboard accessible — when\ncontent overflows, the area becomes focusable via tab and scrollable with\narrow keys.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nstorybook\nchakra ","combined":"scrollarea a scrollable container with custom-styled scrollbar overlays. useful for constrained content areas like panels, sidebars, and dialog bodies. component scroll-area layout overflow scrollbar overview\n\nscrollarea constrains content within a fixed region and provides themed\nscrollbar overlays that replace native browser scrollbars. the scrollbar\nappears on hover or during scrolling by default, keeping the interface clean\nuntil the user needs to scroll. the component is keyboard accessible — when\ncontent overflows, the area becomes focusable via tab and scrollable with\narrow keys.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nstorybook\nchakra ","titleNoSpaces":"scrollarea","descriptionNoSpaces":"ascrollablecontainerwithcustom-styledscrollbaroverlays.usefulforconstrainedcontentareaslikepanels,sidebars,anddialogbodies.","tagsNoSpaces":"componentscroll-arealayoutoverflowscrollbar","titleWords":["scrollarea"],"descriptionWords":["a","scrollable","container","with","custom-styled","scrollbar","overlays.","useful","for","constrained","content","areas","like","panels,","sidebars,","and","dialog","bodies."],"tagsWords":["component","scroll-area","layout","overflow","scrollbar"]}},{"id":"Components-SearchInput","title":"Search input","exportName":"SearchInput","description":"Allows users to discover and filter content by entering text to help users find relevant information efficiently.","tags":["component","search","input"],"route":"components/inputs/search-input","menu":["Components","Inputs","Search input"],"content":"Overview\n\nSearch inputs provide a dedicated text field for users to enter keywords or phrases to query and retrieve matching data or content. They are essential for navigating large amounts of information.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact Aria SearchField\nFigma Library\n\nVariables\n\nGet familiar with the features.\n\nVisual Options\n\nSize\n\nThe medium size of the SearchInput is default, the small size is meant for more compact uses.\n\n``jsx ","_lower":{"title":"search input","description":"allows users to discover and filter content by entering text to help users find relevant information efficiently.","tags":"component search input","content":"overview\n\nsearch inputs provide a dedicated text field for users to enter keywords or phrases to query and retrieve matching data or content. they are essential for navigating large amounts of information.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria searchfield\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nthe medium size of the searchinput is default, the small size is meant for more compact uses.\n\n``jsx ","combined":"search input allows users to discover and filter content by entering text to help users find relevant information efficiently. component search input overview\n\nsearch inputs provide a dedicated text field for users to enter keywords or phrases to query and retrieve matching data or content. they are essential for navigating large amounts of information.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria searchfield\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nthe medium size of the searchinput is default, the small size is meant for more compact uses.\n\n``jsx ","titleNoSpaces":"searchinput","descriptionNoSpaces":"allowsuserstodiscoverandfiltercontentbyenteringtexttohelpusersfindrelevantinformationefficiently.","tagsNoSpaces":"componentsearchinput","titleWords":["search","input"],"descriptionWords":["allows","users","to","discover","and","filter","content","by","entering","text","to","help","users","find","relevant","information","efficiently."],"tagsWords":["component","search","input"]}},{"id":"Components-Select","title":"Select","exportName":"Select","description":"A select input is a form field that presents users with a dropdown menu of options to choose from.","tags":["component","select","dropdown","picker","options"],"route":"components/inputs/select-input","menu":["Components","Inputs","Select input"],"content":"Overview\n\nSelect inputs have two main appearances, two sizes, and several states that will\nrespond to validation status. Currently, this is a single value selector, this\nwill be reworked to bring in multi-select in the future.\n\nResources\n\nARIA APG: Listbox Pattern\nReact ARIA: Select\nFigma Library\n\nVariables\n\nGet familiar with the features.\n\nHeight options\n\nMedium\n\nThis is the default size for the select input.\n\n``jsx live\nconst App = () => (\n  <Select.Root size=\"md\" aria-label=\"Select a fruit\">\n","_lower":{"title":"select","description":"a select input is a form field that presents users with a dropdown menu of options to choose from.","tags":"component select dropdown picker options","content":"overview\n\nselect inputs have two main appearances, two sizes, and several states that will\nrespond to validation status. currently, this is a single value selector, this\nwill be reworked to bring in multi-select in the future.\n\nresources\n\naria apg: listbox pattern\nreact aria: select\nfigma library\n\nvariables\n\nget familiar with the features.\n\nheight options\n\nmedium\n\nthis is the default size for the select input.\n\n``jsx live\nconst app = () => (\n  <select.root size=\"md\" aria-label=\"select a fruit\">\n","combined":"select a select input is a form field that presents users with a dropdown menu of options to choose from. component select dropdown picker options overview\n\nselect inputs have two main appearances, two sizes, and several states that will\nrespond to validation status. currently, this is a single value selector, this\nwill be reworked to bring in multi-select in the future.\n\nresources\n\naria apg: listbox pattern\nreact aria: select\nfigma library\n\nvariables\n\nget familiar with the features.\n\nheight options\n\nmedium\n\nthis is the default size for the select input.\n\n``jsx live\nconst app = () => (\n  <select.root size=\"md\" aria-label=\"select a fruit\">\n","titleNoSpaces":"select","descriptionNoSpaces":"aselectinputisaformfieldthatpresentsuserswithadropdownmenuofoptionstochoosefrom.","tagsNoSpaces":"componentselectdropdownpickeroptions","titleWords":["select"],"descriptionWords":["a","select","input","is","a","form","field","that","presents","users","with","a","dropdown","menu","of","options","to","choose","from."],"tagsWords":["component","select","dropdown","picker","options"]}},{"id":"Components-Separator","title":"Separator","exportName":"Separator","description":"A separator is a visual or semantic line that groups and divides content, establishing rhythm and hierarchy within a layout.","tags":["component","divider","separator","line","section"],"route":"components/layout/separator","menu":["Components","Layout","Separator"],"content":"Overview\n\nSeparators enhance clarity by visually breaking up content. They can be\nhorizontal or vertical.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nLabel options\n\nHorizontal\n\nHorizontal separators can be used to divide content or tools. It can span the\nentire page width or small areas.\n\n``jsx live\nconst App = () => (\n  <Box width=\"1600\">\n    <Separator />\n  </Box>\n)\n`\n\nVertical\n\nVertical sep","_lower":{"title":"separator","description":"a separator is a visual or semantic line that groups and divides content, establishing rhythm and hierarchy within a layout.","tags":"component divider separator line section","content":"overview\n\nseparators enhance clarity by visually breaking up content. they can be\nhorizontal or vertical.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nlabel options\n\nhorizontal\n\nhorizontal separators can be used to divide content or tools. it can span the\nentire page width or small areas.\n\n``jsx live\nconst app = () => (\n  <box width=\"1600\">\n    <separator />\n  </box>\n)\n`\n\nvertical\n\nvertical sep","combined":"separator a separator is a visual or semantic line that groups and divides content, establishing rhythm and hierarchy within a layout. component divider separator line section overview\n\nseparators enhance clarity by visually breaking up content. they can be\nhorizontal or vertical.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nlabel options\n\nhorizontal\n\nhorizontal separators can be used to divide content or tools. it can span the\nentire page width or small areas.\n\n``jsx live\nconst app = () => (\n  <box width=\"1600\">\n    <separator />\n  </box>\n)\n`\n\nvertical\n\nvertical sep","titleNoSpaces":"separator","descriptionNoSpaces":"aseparatorisavisualorsemanticlinethatgroupsanddividescontent,establishingrhythmandhierarchywithinalayout.","tagsNoSpaces":"componentdividerseparatorlinesection","titleWords":["separator"],"descriptionWords":["a","separator","is","a","visual","or","semantic","line","that","groups","and","divides","content,","establishing","rhythm","and","hierarchy","within","a","layout."],"tagsWords":["component","divider","separator","line","section"]}},{"id":"Components-SimpleGrid","title":"Simple grid","exportName":"SimpleGrid","description":"SimpleGrid offers an intuitive way to easily create responsive grid layouts.","tags":["component","grid","simple","layout","columns"],"route":"components/layout/simple-grid","menu":["Components","Layout","Simple grid"],"content":"Basic usage\n\nUse SimpleGrid → When you need a quick, responsive, equal-sized grid (e.g.,\nproduct listings, image galleries).\n\n``jsx\nimport { SimpleGrid } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst App = () => (\n  <SimpleGrid gap=\"100\">\n    <Box key=\"1\" p=\"400\" bg=\"neutral.7\">\n      Item 1\n    </Box>\n    <Box key=\"2\" p=\"400\" bg=\"neutral.7\">\n      Item 2\n    </Box>\n  </SimpleGrid>\n)\n`\n\nWith columns\n\nUse the columns prop to define the number of columns in the grid layout.\n\n`jsx live\nconst App","_lower":{"title":"simple grid","description":"simplegrid offers an intuitive way to easily create responsive grid layouts.","tags":"component grid simple layout columns","content":"basic usage\n\nuse simplegrid → when you need a quick, responsive, equal-sized grid (e.g.,\nproduct listings, image galleries).\n\n``jsx\nimport { simplegrid } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst app = () => (\n  <simplegrid gap=\"100\">\n    <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n      item 1\n    </box>\n    <box key=\"2\" p=\"400\" bg=\"neutral.7\">\n      item 2\n    </box>\n  </simplegrid>\n)\n`\n\nwith columns\n\nuse the columns prop to define the number of columns in the grid layout.\n\n`jsx live\nconst app","combined":"simple grid simplegrid offers an intuitive way to easily create responsive grid layouts. component grid simple layout columns basic usage\n\nuse simplegrid → when you need a quick, responsive, equal-sized grid (e.g.,\nproduct listings, image galleries).\n\n``jsx\nimport { simplegrid } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst app = () => (\n  <simplegrid gap=\"100\">\n    <box key=\"1\" p=\"400\" bg=\"neutral.7\">\n      item 1\n    </box>\n    <box key=\"2\" p=\"400\" bg=\"neutral.7\">\n      item 2\n    </box>\n  </simplegrid>\n)\n`\n\nwith columns\n\nuse the columns prop to define the number of columns in the grid layout.\n\n`jsx live\nconst app","titleNoSpaces":"simplegrid","descriptionNoSpaces":"simplegridoffersanintuitivewaytoeasilycreateresponsivegridlayouts.","tagsNoSpaces":"componentgridsimplelayoutcolumns","titleWords":["simple","grid"],"descriptionWords":["simplegrid","offers","an","intuitive","way","to","easily","create","responsive","grid","layouts."],"tagsWords":["component","grid","simple","layout","columns"]}},{"id":"Components-Spacer","title":"Spacer","exportName":"Spacer","description":"A simple layout component that automatically fills available space in flex layouts using flexGrow 1.","tags":["component","layout","flex"],"route":"components/layout/spacer","menu":["Components","Layout","Spacer"],"content":"Overview\n\nSpacer is a utility component designed to create flexible spacing between\nelements in flex layouts. It automatically expands to fill any remaining space,\nmaking it perfect for creating navigation bars, toolbars, and other layouts\nwhere you need to push elements apart.\n\nKey features\n\n- Automatic Space Filling: Uses flexGrow: 1 to occupy all available space\n- Works in Any Direction: Supports both horizontal and vertical flex layouts\n- Flexible Styling: Can accept any Chakra UI Box props ","_lower":{"title":"spacer","description":"a simple layout component that automatically fills available space in flex layouts using flexgrow 1.","tags":"component layout flex","content":"overview\n\nspacer is a utility component designed to create flexible spacing between\nelements in flex layouts. it automatically expands to fill any remaining space,\nmaking it perfect for creating navigation bars, toolbars, and other layouts\nwhere you need to push elements apart.\n\nkey features\n\n- automatic space filling: uses flexgrow: 1 to occupy all available space\n- works in any direction: supports both horizontal and vertical flex layouts\n- flexible styling: can accept any chakra ui box props ","combined":"spacer a simple layout component that automatically fills available space in flex layouts using flexgrow 1. component layout flex overview\n\nspacer is a utility component designed to create flexible spacing between\nelements in flex layouts. it automatically expands to fill any remaining space,\nmaking it perfect for creating navigation bars, toolbars, and other layouts\nwhere you need to push elements apart.\n\nkey features\n\n- automatic space filling: uses flexgrow: 1 to occupy all available space\n- works in any direction: supports both horizontal and vertical flex layouts\n- flexible styling: can accept any chakra ui box props ","titleNoSpaces":"spacer","descriptionNoSpaces":"asimplelayoutcomponentthatautomaticallyfillsavailablespaceinflexlayoutsusingflexgrow1.","tagsNoSpaces":"componentlayoutflex","titleWords":["spacer"],"descriptionWords":["a","simple","layout","component","that","automatically","fills","available","space","in","flex","layouts","using","flexgrow","1."],"tagsWords":["component","layout","flex"]}},{"id":"Components-SplitButton","title":"Split button","exportName":"SplitButton","description":"A split button merges a main action with a dropdown for related, less common actions.","tags":["component","buttons","actions","controls"],"route":"components/buttons/split-button","menu":["Components","Buttons","Split button"],"content":"Overview\n\nA split button merges a main action that is immediate with a secondary dropdown\nmenu that holds related actions that are used less often. This component\nprovides quick access to essential functions while offering a complete list of\noptions, all while saving space.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisuals\n\nSolid\n\nMost common styling of the split button. Try to keep only one","_lower":{"title":"split button","description":"a split button merges a main action with a dropdown for related, less common actions.","tags":"component buttons actions controls","content":"overview\n\na split button merges a main action that is immediate with a secondary dropdown\nmenu that holds related actions that are used less often. this component\nprovides quick access to essential functions while offering a complete list of\noptions, all while saving space.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\nsolid\n\nmost common styling of the split button. try to keep only one","combined":"split button a split button merges a main action with a dropdown for related, less common actions. component buttons actions controls overview\n\na split button merges a main action that is immediate with a secondary dropdown\nmenu that holds related actions that are used less often. this component\nprovides quick access to essential functions while offering a complete list of\noptions, all while saving space.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisuals\n\nsolid\n\nmost common styling of the split button. try to keep only one","titleNoSpaces":"splitbutton","descriptionNoSpaces":"asplitbuttonmergesamainactionwithadropdownforrelated,lesscommonactions.","tagsNoSpaces":"componentbuttonsactionscontrols","titleWords":["split","button"],"descriptionWords":["a","split","button","merges","a","main","action","with","a","dropdown","for","related,","less","common","actions."],"tagsWords":["component","buttons","actions","controls"]}},{"id":"Components-Splitter","title":"Splitter","exportName":"Splitter","description":"A two-pane compound primitive for user-resizable layouts with a draggable, keyboard-operable handle.","tags":["component","layout","resizable"],"route":"components/layout/splitter","menu":["Components","Layout","Splitter"],"content":"Overview\n\nThe Splitter lets people resize two adjacent regions by dragging the handle\nbetween them — a sidebar next to a content area, a list next to a detail view,\nan editor next to a preview. It is intentionally a two-pane primitive: the\nboundary is a single position, which keeps the interaction predictable and the\naccessibility model clean. Layouts with three or more regions are composed by\nnesting one Splitter inside another's pane.\n\nResources\n\nDeep dive into implementation details and acces","_lower":{"title":"splitter","description":"a two-pane compound primitive for user-resizable layouts with a draggable, keyboard-operable handle.","tags":"component layout resizable","content":"overview\n\nthe splitter lets people resize two adjacent regions by dragging the handle\nbetween them — a sidebar next to a content area, a list next to a detail view,\nan editor next to a preview. it is intentionally a two-pane primitive: the\nboundary is a single position, which keeps the interaction predictable and the\naccessibility model clean. layouts with three or more regions are composed by\nnesting one splitter inside another's pane.\n\nresources\n\ndeep dive into implementation details and acces","combined":"splitter a two-pane compound primitive for user-resizable layouts with a draggable, keyboard-operable handle. component layout resizable overview\n\nthe splitter lets people resize two adjacent regions by dragging the handle\nbetween them — a sidebar next to a content area, a list next to a detail view,\nan editor next to a preview. it is intentionally a two-pane primitive: the\nboundary is a single position, which keeps the interaction predictable and the\naccessibility model clean. layouts with three or more regions are composed by\nnesting one splitter inside another's pane.\n\nresources\n\ndeep dive into implementation details and acces","titleNoSpaces":"splitter","descriptionNoSpaces":"atwo-panecompoundprimitiveforuser-resizablelayoutswithadraggable,keyboard-operablehandle.","tagsNoSpaces":"componentlayoutresizable","titleWords":["splitter"],"descriptionWords":["a","two-pane","compound","primitive","for","user-resizable","layouts","with","a","draggable,","keyboard-operable","handle."],"tagsWords":["component","layout","resizable"]}},{"id":"Components-Stack","title":"Stack","exportName":"Stack","description":"An easily customizable Stack component, re-exported from Chakra UI stack component, that provides a consistent and responsive layout structure across different products. Stacks allow you to effortlessly build flexible layouts with automatic distribution. You can arrange elements horizontally or vertically, adding spacing and/or separators between each item.","tags":["component","stack","layout","vertical","horizontal"],"route":"components/layout/stack","menu":["Components","Layout","Stack"],"content":"Basic usage\n\n``jsx\nimport { Stack } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst App = () => (\n  <Stack>\n    {\" \"}\n    <Box key=\"1\" p=\"400\" bg=\"primary.7\">\n      Item 1\n    </Box>\n    <Box key=\"1\" p=\"400\" bg=\"primary.7\">\n      Item 2\n    </Box>\n  </Stack>\n);\n`\n\nWith direction\n\nUse the direction prop to change the layout direction. The default direction is\n\"column\" (vertical). Set it to \"row\" for horizontal stacking.\n\n`jsx live\nconst App = () => (\n  <Stack direction=\"row\">\n    <Box key=\"1\" p=","_lower":{"title":"stack","description":"an easily customizable stack component, re-exported from chakra ui stack component, that provides a consistent and responsive layout structure across different products. stacks allow you to effortlessly build flexible layouts with automatic distribution. you can arrange elements horizontally or vertically, adding spacing and/or separators between each item.","tags":"component stack layout vertical horizontal","content":"basic usage\n\n``jsx\nimport { stack } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst app = () => (\n  <stack>\n    {\" \"}\n    <box key=\"1\" p=\"400\" bg=\"primary.7\">\n      item 1\n    </box>\n    <box key=\"1\" p=\"400\" bg=\"primary.7\">\n      item 2\n    </box>\n  </stack>\n);\n`\n\nwith direction\n\nuse the direction prop to change the layout direction. the default direction is\n\"column\" (vertical). set it to \"row\" for horizontal stacking.\n\n`jsx live\nconst app = () => (\n  <stack direction=\"row\">\n    <box key=\"1\" p=","combined":"stack an easily customizable stack component, re-exported from chakra ui stack component, that provides a consistent and responsive layout structure across different products. stacks allow you to effortlessly build flexible layouts with automatic distribution. you can arrange elements horizontally or vertically, adding spacing and/or separators between each item. component stack layout vertical horizontal basic usage\n\n``jsx\nimport { stack } from \"@commercetools/nimbus\";\n`\n\n`jsx live\nconst app = () => (\n  <stack>\n    {\" \"}\n    <box key=\"1\" p=\"400\" bg=\"primary.7\">\n      item 1\n    </box>\n    <box key=\"1\" p=\"400\" bg=\"primary.7\">\n      item 2\n    </box>\n  </stack>\n);\n`\n\nwith direction\n\nuse the direction prop to change the layout direction. the default direction is\n\"column\" (vertical). set it to \"row\" for horizontal stacking.\n\n`jsx live\nconst app = () => (\n  <stack direction=\"row\">\n    <box key=\"1\" p=","titleNoSpaces":"stack","descriptionNoSpaces":"aneasilycustomizablestackcomponent,re-exportedfromchakrauistackcomponent,thatprovidesaconsistentandresponsivelayoutstructureacrossdifferentproducts.stacksallowyoutoeffortlesslybuildflexiblelayoutswithautomaticdistribution.youcanarrangeelementshorizontallyorvertically,addingspacingand/orseparatorsbetweeneachitem.","tagsNoSpaces":"componentstacklayoutverticalhorizontal","titleWords":["stack"],"descriptionWords":["an","easily","customizable","stack","component,","re-exported","from","chakra","ui","stack","component,","that","provides","a","consistent","and","responsive","layout","structure","across","different","products.","stacks","allow","you","to","effortlessly","build","flexible","layouts","with","automatic","distribution.","you","can","arrange","elements","horizontally","or","vertically,","adding","spacing","and/or","separators","between","each","item."],"tagsWords":["component","stack","layout","vertical","horizontal"]}},{"id":"Components-Steps","title":"Steps","exportName":"Steps","description":"A progress indicator with built-in navigation that visually communicates the user's position within a multi-step process such as forms, wizards, and onboarding flows.","tags":["component","stepper","progress","wizard","navigation"],"route":"components/navigation/steps","menu":["Components","Navigation","Steps"],"content":"Overview\n\nThe Steps component helps users understand where they are in a multi-step\nprocess. It provides clear visual feedback about completed, current, and\nupcoming steps, making complex workflows feel more manageable and predictable.\n\nKey Features\n\n- Three size variants: Extra small (xs), small (sm), and medium (md) to fit\n  different interface densities\n- Two orientations: Horizontal for wide layouts and vertical for sidebar or\n  narrow contexts\n- Flexible indicators: Numeric step numbers wit","_lower":{"title":"steps","description":"a progress indicator with built-in navigation that visually communicates the user's position within a multi-step process such as forms, wizards, and onboarding flows.","tags":"component stepper progress wizard navigation","content":"overview\n\nthe steps component helps users understand where they are in a multi-step\nprocess. it provides clear visual feedback about completed, current, and\nupcoming steps, making complex workflows feel more manageable and predictable.\n\nkey features\n\n- three size variants: extra small (xs), small (sm), and medium (md) to fit\n  different interface densities\n- two orientations: horizontal for wide layouts and vertical for sidebar or\n  narrow contexts\n- flexible indicators: numeric step numbers wit","combined":"steps a progress indicator with built-in navigation that visually communicates the user's position within a multi-step process such as forms, wizards, and onboarding flows. component stepper progress wizard navigation overview\n\nthe steps component helps users understand where they are in a multi-step\nprocess. it provides clear visual feedback about completed, current, and\nupcoming steps, making complex workflows feel more manageable and predictable.\n\nkey features\n\n- three size variants: extra small (xs), small (sm), and medium (md) to fit\n  different interface densities\n- two orientations: horizontal for wide layouts and vertical for sidebar or\n  narrow contexts\n- flexible indicators: numeric step numbers wit","titleNoSpaces":"steps","descriptionNoSpaces":"aprogressindicatorwithbuilt-innavigationthatvisuallycommunicatestheuser'spositionwithinamulti-stepprocesssuchasforms,wizards,andonboardingflows.","tagsNoSpaces":"componentstepperprogresswizardnavigation","titleWords":["steps"],"descriptionWords":["a","progress","indicator","with","built-in","navigation","that","visually","communicates","the","user's","position","within","a","multi-step","process","such","as","forms,","wizards,","and","onboarding","flows."],"tagsWords":["component","stepper","progress","wizard","navigation"]}},{"id":"Components-Switch","title":"Switch","exportName":"Switch","description":"A clear, visual toggle, allowing users to activate or deactivate a setting quickly.","tags":["component","input","toggle"],"route":"components/inputs/switch","menu":["Components","Inputs","Switch"],"content":"Overview\n\nThis switch is an interactive element that provides instant visual feedback\nallowing users to toggle binary options.\n\nResources\n\n- Figma\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nMedium (md)\n\n``jsx live\nconst App = () => <Switch size=\"md\">Label</Switch>;\n`\n\nSmall (sm)\n\n`jsx live\nconst App = () => <Switch size=\"sm\">Label</Switch>;\n`\n\nLabels\n\nWith label\n\nIt is always good practice to have a label paired with a switch so a user knows\nwhat is being toggled. The label responds to b","_lower":{"title":"switch","description":"a clear, visual toggle, allowing users to activate or deactivate a setting quickly.","tags":"component input toggle","content":"overview\n\nthis switch is an interactive element that provides instant visual feedback\nallowing users to toggle binary options.\n\nresources\n\n- figma\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium (md)\n\n``jsx live\nconst app = () => <switch size=\"md\">label</switch>;\n`\n\nsmall (sm)\n\n`jsx live\nconst app = () => <switch size=\"sm\">label</switch>;\n`\n\nlabels\n\nwith label\n\nit is always good practice to have a label paired with a switch so a user knows\nwhat is being toggled. the label responds to b","combined":"switch a clear, visual toggle, allowing users to activate or deactivate a setting quickly. component input toggle overview\n\nthis switch is an interactive element that provides instant visual feedback\nallowing users to toggle binary options.\n\nresources\n\n- figma\n\nvariables\n\nget familiar with the features.\n\nsize\n\nmedium (md)\n\n``jsx live\nconst app = () => <switch size=\"md\">label</switch>;\n`\n\nsmall (sm)\n\n`jsx live\nconst app = () => <switch size=\"sm\">label</switch>;\n`\n\nlabels\n\nwith label\n\nit is always good practice to have a label paired with a switch so a user knows\nwhat is being toggled. the label responds to b","titleNoSpaces":"switch","descriptionNoSpaces":"aclear,visualtoggle,allowinguserstoactivateordeactivateasettingquickly.","tagsNoSpaces":"componentinputtoggle","titleWords":["switch"],"descriptionWords":["a","clear,","visual","toggle,","allowing","users","to","activate","or","deactivate","a","setting","quickly."],"tagsWords":["component","input","toggle"]}},{"id":"Components-Table","title":"Table","exportName":"Table","description":"The Table component provides a straightforward way to display static, read-only data in a tabular format. It uses semantic HTML table elements and is designed for simple data presentation without interactive features like sorting, filtering, or selection.","tags":["component","table","tabular data","static","read-only"],"route":"components/data-display/table","menu":["Components","Data Display","Table"],"content":"Related components\n\n- DataTable Component - Upgrade to DataTable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\nThe DataTable component is built for complex, interactive data management. If you only need to display static content, Table is the simpler, lighter choice.","_lower":{"title":"table","description":"the table component provides a straightforward way to display static, read-only data in a tabular format. it uses semantic html table elements and is designed for simple data presentation without interactive features like sorting, filtering, or selection.","tags":"component table tabular data static read-only","content":"related components\n\n- datatable component - upgrade to datatable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\nthe datatable component is built for complex, interactive data management. if you only need to display static content, table is the simpler, lighter choice.","combined":"table the table component provides a straightforward way to display static, read-only data in a tabular format. it uses semantic html table elements and is designed for simple data presentation without interactive features like sorting, filtering, or selection. component table tabular data static read-only related components\n\n- datatable component - upgrade to datatable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\nthe datatable component is built for complex, interactive data management. if you only need to display static content, table is the simpler, lighter choice.","titleNoSpaces":"table","descriptionNoSpaces":"thetablecomponentprovidesastraightforwardwaytodisplaystatic,read-onlydatainatabularformat.itusessemantichtmltableelementsandisdesignedforsimpledatapresentationwithoutinteractivefeatureslikesorting,filtering,orselection.","tagsNoSpaces":"componenttabletabulardatastaticread-only","titleWords":["table"],"descriptionWords":["the","table","component","provides","a","straightforward","way","to","display","static,","read-only","data","in","a","tabular","format.","it","uses","semantic","html","table","elements","and","is","designed","for","simple","data","presentation","without","interactive","features","like","sorting,","filtering,","or","selection."],"tagsWords":["component","table","tabular","data","static","read-only"]}},{"id":"Components-TabNav","title":"TabNav","exportName":"TabNav","description":"Tab-styled navigation links for route-based page navigation.","tags":["component","navigation","tab-nav"],"route":"components/navigation/tabnav","menu":["Components","Navigation","TabNav"],"content":"Overview\n\nTabNav provides tab-styled navigation links for route-based page navigation.\nUnlike Tabs, which switch content panels within the same page, TabNav renders\na <nav> landmark containing <a> anchor elements that link to distinct routes.\nEach item behaves as a standard link, and the active item is identified with\naria-current=\"page\".\n\nUse TabNav in page headers where each item links to a different URL (e.g.,\n/orders/123/general, /orders/123/items).\n\nResources\n\nDeep dive into implementation ","_lower":{"title":"tabnav","description":"tab-styled navigation links for route-based page navigation.","tags":"component navigation tab-nav","content":"overview\n\ntabnav provides tab-styled navigation links for route-based page navigation.\nunlike tabs, which switch content panels within the same page, tabnav renders\na <nav> landmark containing <a> anchor elements that link to distinct routes.\neach item behaves as a standard link, and the active item is identified with\naria-current=\"page\".\n\nuse tabnav in page headers where each item links to a different url (e.g.,\n/orders/123/general, /orders/123/items).\n\nresources\n\ndeep dive into implementation ","combined":"tabnav tab-styled navigation links for route-based page navigation. component navigation tab-nav overview\n\ntabnav provides tab-styled navigation links for route-based page navigation.\nunlike tabs, which switch content panels within the same page, tabnav renders\na <nav> landmark containing <a> anchor elements that link to distinct routes.\neach item behaves as a standard link, and the active item is identified with\naria-current=\"page\".\n\nuse tabnav in page headers where each item links to a different url (e.g.,\n/orders/123/general, /orders/123/items).\n\nresources\n\ndeep dive into implementation ","titleNoSpaces":"tabnav","descriptionNoSpaces":"tab-stylednavigationlinksforroute-basedpagenavigation.","tagsNoSpaces":"componentnavigationtab-nav","titleWords":["tabnav"],"descriptionWords":["tab-styled","navigation","links","for","route-based","page","navigation."],"tagsWords":["component","navigation","tab-nav"]}},{"id":"Components-Tabs","title":"Tabs","exportName":"Tabs","description":"Organizes content into distinct sections, enabling users to switch views within a single container.","tags":["component","navigation","tabs"],"route":"components/navigation/tabs","menu":["Components","Navigation","Tabs"],"content":"Overview\n\nTabs are a navigational component used to organize and switch between different\nsections of content within the same contextual view, allowing users to access\nmultiple related pages or views without navigating away from the main screen.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nReact Aria Docs\n\nTabs vs TabNav\n\nTabs and TabNav look identical but serve fundamentally different purposes.\n\n| | Tabs | TabNav |\n|---|---|---|\n| Use ca","_lower":{"title":"tabs","description":"organizes content into distinct sections, enabling users to switch views within a single container.","tags":"component navigation tabs","content":"overview\n\ntabs are a navigational component used to organize and switch between different\nsections of content within the same contextual view, allowing users to access\nmultiple related pages or views without navigating away from the main screen.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nreact aria docs\n\ntabs vs tabnav\n\ntabs and tabnav look identical but serve fundamentally different purposes.\n\n| | tabs | tabnav |\n|---|---|---|\n| use ca","combined":"tabs organizes content into distinct sections, enabling users to switch views within a single container. component navigation tabs overview\n\ntabs are a navigational component used to organize and switch between different\nsections of content within the same contextual view, allowing users to access\nmultiple related pages or views without navigating away from the main screen.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nreact aria docs\n\ntabs vs tabnav\n\ntabs and tabnav look identical but serve fundamentally different purposes.\n\n| | tabs | tabnav |\n|---|---|---|\n| use ca","titleNoSpaces":"tabs","descriptionNoSpaces":"organizescontentintodistinctsections,enablinguserstoswitchviewswithinasinglecontainer.","tagsNoSpaces":"componentnavigationtabs","titleWords":["tabs"],"descriptionWords":["organizes","content","into","distinct","sections,","enabling","users","to","switch","views","within","a","single","container."],"tagsWords":["component","navigation","tabs"]}},{"id":"Components-TagGroup","title":"Tag group","exportName":"TagGroup","description":"A tag group is a compact, interactive element. It categorizes, labels, or adds attributes to objects for quick recognition and filtering.","tags":["component","tag","chip","label","removable"],"route":"components/data-display/tag-group","menu":["Components","Data Display","Tag group"],"content":"Overview\n\nThe tag group organizes a collection of individual tag components, allowing\nusers to efficiently scan and understand multiple pieces of metadata or filter\ncriteria associated with a product, order, or entity in a compact, manageable\nspace.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\nStorybook\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nSize\n\nThe large size of the tag within tag groups is the default, the small ","_lower":{"title":"tag group","description":"a tag group is a compact, interactive element. it categorizes, labels, or adds attributes to objects for quick recognition and filtering.","tags":"component tag chip label removable","content":"overview\n\nthe tag group organizes a collection of individual tag components, allowing\nusers to efficiently scan and understand multiple pieces of metadata or filter\ncriteria associated with a product, order, or entity in a compact, manageable\nspace.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nthe large size of the tag within tag groups is the default, the small ","combined":"tag group a tag group is a compact, interactive element. it categorizes, labels, or adds attributes to objects for quick recognition and filtering. component tag chip label removable overview\n\nthe tag group organizes a collection of individual tag components, allowing\nusers to efficiently scan and understand multiple pieces of metadata or filter\ncriteria associated with a product, order, or entity in a compact, manageable\nspace.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\nstorybook\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nthe large size of the tag within tag groups is the default, the small ","titleNoSpaces":"taggroup","descriptionNoSpaces":"ataggroupisacompact,interactiveelement.itcategorizes,labels,oraddsattributestoobjectsforquickrecognitionandfiltering.","tagsNoSpaces":"componenttagchiplabelremovable","titleWords":["tag","group"],"descriptionWords":["a","tag","group","is","a","compact,","interactive","element.","it","categorizes,","labels,","or","adds","attributes","to","objects","for","quick","recognition","and","filtering."],"tagsWords":["component","tag","chip","label","removable"]}},{"id":"Components-Text","title":"Text","exportName":"Text","description":"Text styles are predefined collections of typography rules (including font-size, font-weight, line-height, and letter-spacing) that create reusable, consistent styles.","tags":["component","typography","text"],"route":"components/typography/text","menu":["Components","Typography","Text"],"content":"Overview\n\nReadable and consistent text styling is important to creating effective user\nfriendly and efficient products. These styles and tools will help give the\nbuilding blocks and provide more options for creation, and there are still ways\nto allow for customization for the rare cases it is needed.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nTypography scale and hierarchy\n\nText styles here a","_lower":{"title":"text","description":"text styles are predefined collections of typography rules (including font-size, font-weight, line-height, and letter-spacing) that create reusable, consistent styles.","tags":"component typography text","content":"overview\n\nreadable and consistent text styling is important to creating effective user\nfriendly and efficient products. these styles and tools will help give the\nbuilding blocks and provide more options for creation, and there are still ways\nto allow for customization for the rare cases it is needed.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntypography scale and hierarchy\n\ntext styles here a","combined":"text text styles are predefined collections of typography rules (including font-size, font-weight, line-height, and letter-spacing) that create reusable, consistent styles. component typography text overview\n\nreadable and consistent text styling is important to creating effective user\nfriendly and efficient products. these styles and tools will help give the\nbuilding blocks and provide more options for creation, and there are still ways\nto allow for customization for the rare cases it is needed.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\ntypography scale and hierarchy\n\ntext styles here a","titleNoSpaces":"text","descriptionNoSpaces":"textstylesarepredefinedcollectionsoftypographyrules(includingfont-size,font-weight,line-height,andletter-spacing)thatcreatereusable,consistentstyles.","tagsNoSpaces":"componenttypographytext","titleWords":["text"],"descriptionWords":["text","styles","are","predefined","collections","of","typography","rules","(including","font-size,","font-weight,","line-height,","and","letter-spacing)","that","create","reusable,","consistent","styles."],"tagsWords":["component","typography","text"]}},{"id":"Components-TextInput","title":"Text input","exportName":"TextInput","description":"Allows users to enter information like names, addresses, emails, passwords, search queries, or any other text-based data.","tags":["component","text","input","field","string"],"route":"components/inputs/text-input","menu":["Components","Inputs","Text input"],"content":"Overview\n\nUsers can type, delete, copy, and paste text within the box. Sometimes, there\ncan be additional features like autocomplete or validation to help users enter\ninformation correctly.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nPlaceholder\n\nThis is the styling for placeholder text. It is a shade lighter than active\ntext.\n\n``jsx live\nconst App = () => <TextInput placeholder=\"input value\"/","_lower":{"title":"text input","description":"allows users to enter information like names, addresses, emails, passwords, search queries, or any other text-based data.","tags":"component text input field string","content":"overview\n\nusers can type, delete, copy, and paste text within the box. sometimes, there\ncan be additional features like autocomplete or validation to help users enter\ninformation correctly.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nplaceholder\n\nthis is the styling for placeholder text. it is a shade lighter than active\ntext.\n\n``jsx live\nconst app = () => <textinput placeholder=\"input value\"/","combined":"text input allows users to enter information like names, addresses, emails, passwords, search queries, or any other text-based data. component text input field string overview\n\nusers can type, delete, copy, and paste text within the box. sometimes, there\ncan be additional features like autocomplete or validation to help users enter\ninformation correctly.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nplaceholder\n\nthis is the styling for placeholder text. it is a shade lighter than active\ntext.\n\n``jsx live\nconst app = () => <textinput placeholder=\"input value\"/","titleNoSpaces":"textinput","descriptionNoSpaces":"allowsuserstoenterinformationlikenames,addresses,emails,passwords,searchqueries,oranyothertext-baseddata.","tagsNoSpaces":"componenttextinputfieldstring","titleWords":["text","input"],"descriptionWords":["allows","users","to","enter","information","like","names,","addresses,","emails,","passwords,","search","queries,","or","any","other","text-based","data."],"tagsWords":["component","text","input","field","string"]}},{"id":"Components-TimeInput","title":"Time input","exportName":"TimeInput","description":"A time input allows users to enter and select a specific time. It supports flexible input methods while ensuring accuracy and ease of use.","tags":["component","time","date"],"route":"components/inputs/time-input","menu":["Components","Inputs","Time input"],"content":"Overview\n\nA time input enables users to enter and select a specific time. It offers\nflexible input methods while maintaining accuracy and usability.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact ARIA\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nSize\n\nMedium size is the default sizing used most commonly, with a small size for\ncompact use cases.\n\n``jsx live\nconst App = () => (\n  <Grid templateColumns=\"repeat(2, 1fr)\" ga","_lower":{"title":"time input","description":"a time input allows users to enter and select a specific time. it supports flexible input methods while ensuring accuracy and ease of use.","tags":"component time date","content":"overview\n\na time input enables users to enter and select a specific time. it offers\nflexible input methods while maintaining accuracy and usability.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nmedium size is the default sizing used most commonly, with a small size for\ncompact use cases.\n\n``jsx live\nconst app = () => (\n  <grid templatecolumns=\"repeat(2, 1fr)\" ga","combined":"time input a time input allows users to enter and select a specific time. it supports flexible input methods while ensuring accuracy and ease of use. component time date overview\n\na time input enables users to enter and select a specific time. it offers\nflexible input methods while maintaining accuracy and usability.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact aria\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nsize\n\nmedium size is the default sizing used most commonly, with a small size for\ncompact use cases.\n\n``jsx live\nconst app = () => (\n  <grid templatecolumns=\"repeat(2, 1fr)\" ga","titleNoSpaces":"timeinput","descriptionNoSpaces":"atimeinputallowsuserstoenterandselectaspecifictime.itsupportsflexibleinputmethodswhileensuringaccuracyandeaseofuse.","tagsNoSpaces":"componenttimedate","titleWords":["time","input"],"descriptionWords":["a","time","input","allows","users","to","enter","and","select","a","specific","time.","it","supports","flexible","input","methods","while","ensuring","accuracy","and","ease","of","use."],"tagsWords":["component","time","date"]}},{"id":"Components-Toast","title":"Toast","exportName":"toast","description":"Displays brief, temporary notifications that confirm actions or provide status updates without interrupting the user's workflow.","tags":["component","notification","feedback","transient"],"route":"components/feedback/toast","menu":["Components","Feedback","Toast"],"content":"Overview\n\nToasts are lightweight, non-modal notifications that appear temporarily at the edge of the screen. They provide contextual feedback about completed actions, system status, or important updates while allowing users to continue their work uninterrupted. Unlike alerts or dialogs, toasts automatically dismiss after a few seconds and don't require user interaction unless an action is provided.\n\nKey characteristics\n\n- Non-intrusive: Appears without blocking content or requiring immediate att","_lower":{"title":"toast","description":"displays brief, temporary notifications that confirm actions or provide status updates without interrupting the user's workflow.","tags":"component notification feedback transient","content":"overview\n\ntoasts are lightweight, non-modal notifications that appear temporarily at the edge of the screen. they provide contextual feedback about completed actions, system status, or important updates while allowing users to continue their work uninterrupted. unlike alerts or dialogs, toasts automatically dismiss after a few seconds and don't require user interaction unless an action is provided.\n\nkey characteristics\n\n- non-intrusive: appears without blocking content or requiring immediate att","combined":"toast displays brief, temporary notifications that confirm actions or provide status updates without interrupting the user's workflow. component notification feedback transient overview\n\ntoasts are lightweight, non-modal notifications that appear temporarily at the edge of the screen. they provide contextual feedback about completed actions, system status, or important updates while allowing users to continue their work uninterrupted. unlike alerts or dialogs, toasts automatically dismiss after a few seconds and don't require user interaction unless an action is provided.\n\nkey characteristics\n\n- non-intrusive: appears without blocking content or requiring immediate att","titleNoSpaces":"toast","descriptionNoSpaces":"displaysbrief,temporarynotificationsthatconfirmactionsorprovidestatusupdateswithoutinterruptingtheuser'sworkflow.","tagsNoSpaces":"componentnotificationfeedbacktransient","titleWords":["toast"],"descriptionWords":["displays","brief,","temporary","notifications","that","confirm","actions","or","provide","status","updates","without","interrupting","the","user's","workflow."],"tagsWords":["component","notification","feedback","transient"]}},{"id":"Components-ToggleButton","title":"Toggle button","exportName":"ToggleButton","description":"An interactive button that toggles between two binary states such as active and inactive.","tags":["component","buttons","toggle","controls"],"route":"components/buttons/toggle-button","menu":["Components","Buttons","Toggle button"],"content":"Overview\n\nA toggle button is used similarly to a checkbox or a radio button, but supports\na smaller interactive component that can be used to give a binary active state\nchoice to users that can be used alone or in combination with other choices. A\ntoggle button or toggle icon button gives a user a new way of visualizing the\ninformation in the interface. It does not typically perform an action. Please\nuse a button or an icon button for these uses.\n\nResources\n\nDeep dive into implementation details","_lower":{"title":"toggle button","description":"an interactive button that toggles between two binary states such as active and inactive.","tags":"component buttons toggle controls","content":"overview\n\na toggle button is used similarly to a checkbox or a radio button, but supports\na smaller interactive component that can be used to give a binary active state\nchoice to users that can be used alone or in combination with other choices. a\ntoggle button or toggle icon button gives a user a new way of visualizing the\ninformation in the interface. it does not typically perform an action. please\nuse a button or an icon button for these uses.\n\nresources\n\ndeep dive into implementation details","combined":"toggle button an interactive button that toggles between two binary states such as active and inactive. component buttons toggle controls overview\n\na toggle button is used similarly to a checkbox or a radio button, but supports\na smaller interactive component that can be used to give a binary active state\nchoice to users that can be used alone or in combination with other choices. a\ntoggle button or toggle icon button gives a user a new way of visualizing the\ninformation in the interface. it does not typically perform an action. please\nuse a button or an icon button for these uses.\n\nresources\n\ndeep dive into implementation details","titleNoSpaces":"togglebutton","descriptionNoSpaces":"aninteractivebuttonthattogglesbetweentwobinarystatessuchasactiveandinactive.","tagsNoSpaces":"componentbuttonstogglecontrols","titleWords":["toggle","button"],"descriptionWords":["an","interactive","button","that","toggles","between","two","binary","states","such","as","active","and","inactive."],"tagsWords":["component","buttons","toggle","controls"]}},{"id":"Components-ToggleButtonGroup","title":"Toggle button group","exportName":"ToggleButtonGroup","description":"A set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.","tags":["component","buttons","toggle","group","controls"],"route":"components/buttons/toggle-button-group","menu":["Components","Buttons","Toggle button group"],"content":"Overview\n\nButton groups can be used several ways, with and without icons, and spanning\nfrom two selections to several.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nToggleButtonGroup on react-aria\n\nRelevant W3C Aria pattern\n\nVariables\n\nGet familiar with the features.\n\nSize\n\nToggle Button Groups come in different sizes to fit various layout needs.\n\nMedium\n\nThis is the default size.\n\n``jsx live\nconst App = () => (\n  <ToggleButtonGroup.Root ","_lower":{"title":"toggle button group","description":"a set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.","tags":"component buttons toggle group controls","content":"overview\n\nbutton groups can be used several ways, with and without icons, and spanning\nfrom two selections to several.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\ntogglebuttongroup on react-aria\n\nrelevant w3c aria pattern\n\nvariables\n\nget familiar with the features.\n\nsize\n\ntoggle button groups come in different sizes to fit various layout needs.\n\nmedium\n\nthis is the default size.\n\n``jsx live\nconst app = () => (\n  <togglebuttongroup.root ","combined":"toggle button group a set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access. component buttons toggle group controls overview\n\nbutton groups can be used several ways, with and without icons, and spanning\nfrom two selections to several.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\ntogglebuttongroup on react-aria\n\nrelevant w3c aria pattern\n\nvariables\n\nget familiar with the features.\n\nsize\n\ntoggle button groups come in different sizes to fit various layout needs.\n\nmedium\n\nthis is the default size.\n\n``jsx live\nconst app = () => (\n  <togglebuttongroup.root ","titleNoSpaces":"togglebuttongroup","descriptionNoSpaces":"asetofcloselyrelated,mutuallyexclusiveorcomplementaryactionsthatareimportantenoughtobedisplayeddirectlyintheinterfaceforquickaccess.","tagsNoSpaces":"componentbuttonstogglegroupcontrols","titleWords":["toggle","button","group"],"descriptionWords":["a","set","of","closely","related,","mutually","exclusive","or","complementary","actions","that","are","important","enough","to","be","displayed","directly","in","the","interface","for","quick","access."],"tagsWords":["component","buttons","toggle","group","controls"]}},{"id":"Components-Toolbar","title":"Toolbar","exportName":"Toolbar","description":"Toolbars organize related actions and controls in a compact bar for easy access. They provide consistent placement for common or contextual tasks within an application.","tags":["component","toolbar","actions","controls"],"route":"components/navigation/toolbar","menu":["Components","Navigation","Toolbar"],"content":"Overview\n\nA toolbar is a handy container that organizes a group of related buttons and\ntools, using both horizontal and vertical layouts to fit the screen;\nessentially, it gives users quick access to the most common actions they need\nright now.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nVisual options\n\nHorizontal\n\nMost commonly used, horizontal toolbars should sit above the content meant to b","_lower":{"title":"toolbar","description":"toolbars organize related actions and controls in a compact bar for easy access. they provide consistent placement for common or contextual tasks within an application.","tags":"component toolbar actions controls","content":"overview\n\na toolbar is a handy container that organizes a group of related buttons and\ntools, using both horizontal and vertical layouts to fit the screen;\nessentially, it gives users quick access to the most common actions they need\nright now.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nhorizontal\n\nmost commonly used, horizontal toolbars should sit above the content meant to b","combined":"toolbar toolbars organize related actions and controls in a compact bar for easy access. they provide consistent placement for common or contextual tasks within an application. component toolbar actions controls overview\n\na toolbar is a handy container that organizes a group of related buttons and\ntools, using both horizontal and vertical layouts to fit the screen;\nessentially, it gives users quick access to the most common actions they need\nright now.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nfigma library\n\nvariables\n\nget familiar with the features.\n\nvisual options\n\nhorizontal\n\nmost commonly used, horizontal toolbars should sit above the content meant to b","titleNoSpaces":"toolbar","descriptionNoSpaces":"toolbarsorganizerelatedactionsandcontrolsinacompactbarforeasyaccess.theyprovideconsistentplacementforcommonorcontextualtaskswithinanapplication.","tagsNoSpaces":"componenttoolbaractionscontrols","titleWords":["toolbar"],"descriptionWords":["toolbars","organize","related","actions","and","controls","in","a","compact","bar","for","easy","access.","they","provide","consistent","placement","for","common","or","contextual","tasks","within","an","application."],"tagsWords":["component","toolbar","actions","controls"]}},{"id":"Components-tooltip","title":"Tooltip","exportName":"Tooltip","description":"A contextual popup that displays a description for an element.","tags":["component","tooltip","popover","hint","hover"],"route":"components/feedback/tooltip","menu":["Components","Feedback","Tooltip"],"content":"Overview\n\nTooltips offer concise, non-obtrusive guidance and supplemental information,\nenhancing user understanding and interaction with UI elements.\n\nResources\n\nDeep dive into implementation details and access the Nimbus design library.\n\nReact-Aria Tooltip Docs\nARIA Tooltip Pattern\nFigma library\n\nVariables\n\nGet familiar with the features.\n\nPlacements\n\nTooltip placements can populate in different areas, please chose a direction\nthat will be most visible for the users. and the elements that may b","_lower":{"title":"tooltip","description":"a contextual popup that displays a description for an element.","tags":"component tooltip popover hint hover","content":"overview\n\ntooltips offer concise, non-obtrusive guidance and supplemental information,\nenhancing user understanding and interaction with ui elements.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact-aria tooltip docs\naria tooltip pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nplacements\n\ntooltip placements can populate in different areas, please chose a direction\nthat will be most visible for the users. and the elements that may b","combined":"tooltip a contextual popup that displays a description for an element. component tooltip popover hint hover overview\n\ntooltips offer concise, non-obtrusive guidance and supplemental information,\nenhancing user understanding and interaction with ui elements.\n\nresources\n\ndeep dive into implementation details and access the nimbus design library.\n\nreact-aria tooltip docs\naria tooltip pattern\nfigma library\n\nvariables\n\nget familiar with the features.\n\nplacements\n\ntooltip placements can populate in different areas, please chose a direction\nthat will be most visible for the users. and the elements that may b","titleNoSpaces":"tooltip","descriptionNoSpaces":"acontextualpopupthatdisplaysadescriptionforanelement.","tagsNoSpaces":"componenttooltippopoverhinthover","titleWords":["tooltip"],"descriptionWords":["a","contextual","popup","that","displays","a","description","for","an","element."],"tagsWords":["component","tooltip","popover","hint","hover"]}},{"id":"Components-Typography","title":"Typography","description":"Components for text styling and formatting.","tags":["document"],"route":"components/typography","menu":["Components","Typography"],"content":"Typography\n\nComponents for text styling and formatting.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"typography","description":"components for text styling and formatting.","tags":"document","content":"typography\n\ncomponents for text styling and formatting.\n\n<categoryoverview variant=\"list\" />","combined":"typography components for text styling and formatting. document typography\n\ncomponents for text styling and formatting.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"typography","descriptionNoSpaces":"componentsfortextstylingandformatting.","tagsNoSpaces":"document","titleWords":["typography"],"descriptionWords":["components","for","text","styling","and","formatting."],"tagsWords":["document"]}},{"id":"Components-Utilities","title":"Utilities","description":"Low-level or functional components for utility purposes.","tags":["document"],"route":"components/utilities","menu":["Components","Utilities"],"content":"Utilities\n\nLow-level or functional components for utility purposes.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"utilities","description":"low-level or functional components for utility purposes.","tags":"document","content":"utilities\n\nlow-level or functional components for utility purposes.\n\n<categoryoverview variant=\"list\" />","combined":"utilities low-level or functional components for utility purposes. document utilities\n\nlow-level or functional components for utility purposes.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"utilities","descriptionNoSpaces":"low-levelorfunctionalcomponentsforutilitypurposes.","tagsNoSpaces":"document","titleWords":["utilities"],"descriptionWords":["low-level","or","functional","components","for","utility","purposes."],"tagsWords":["document"]}},{"id":"Components-VisuallyHidden","title":"Visually hidden","exportName":"VisuallyHidden","description":"Makes content accessible to screen readers but hides it visually.","tags":["component","accessibility","screen reader","hidden","a11y"],"route":"components/accessibility/visually-hidden","menu":["Components","Accessibility","Visually hidden"],"content":"Basic usage\n\nJust wrap the content you want to hide visually, but keep accessible to screen\nreaders, with the VisuallyHidden component.\n\n``jsx\nconst App = () => <VisuallyHidden>I am VisuallyHidden!</VisuallyHidden>;\n`\n\nFocusable content\n\nIf the content you want to hide visually contains focusable elements, add the\nisFocusable property to the VisuallyHidden component. The content then\nbecomes visible if the first focusable element inside is focused with the\n_keyboard_.\n\n`jsx live\nconst App = () =","_lower":{"title":"visually hidden","description":"makes content accessible to screen readers but hides it visually.","tags":"component accessibility screen reader hidden a11y","content":"basic usage\n\njust wrap the content you want to hide visually, but keep accessible to screen\nreaders, with the visuallyhidden component.\n\n``jsx\nconst app = () => <visuallyhidden>i am visuallyhidden!</visuallyhidden>;\n`\n\nfocusable content\n\nif the content you want to hide visually contains focusable elements, add the\nisfocusable property to the visuallyhidden component. the content then\nbecomes visible if the first focusable element inside is focused with the\n_keyboard_.\n\n`jsx live\nconst app = () =","combined":"visually hidden makes content accessible to screen readers but hides it visually. component accessibility screen reader hidden a11y basic usage\n\njust wrap the content you want to hide visually, but keep accessible to screen\nreaders, with the visuallyhidden component.\n\n``jsx\nconst app = () => <visuallyhidden>i am visuallyhidden!</visuallyhidden>;\n`\n\nfocusable content\n\nif the content you want to hide visually contains focusable elements, add the\nisfocusable property to the visuallyhidden component. the content then\nbecomes visible if the first focusable element inside is focused with the\n_keyboard_.\n\n`jsx live\nconst app = () =","titleNoSpaces":"visuallyhidden","descriptionNoSpaces":"makescontentaccessibletoscreenreadersbuthidesitvisually.","tagsNoSpaces":"componentaccessibilityscreenreaderhiddena11y","titleWords":["visually","hidden"],"descriptionWords":["makes","content","accessible","to","screen","readers","but","hides","it","visually."],"tagsWords":["component","accessibility","screen","reader","hidden","a11y"]}},{"id":"Compound-Component-Extraction","title":"ADR: Standardizing Compound Component Extraction to a `components` Directory","description":"Architecture decision record on organizing compound component implementations","tags":["architecture","components","directory-structure","organization"],"route":"home/contribute/adrs/adr0002-compound-component-extraction","menu":["Home","Contribute","ADR's","ADR0002 Compound Component Extraction"],"content":"ADR: Standardizing Compound Component Extraction to a components Directory\n\nContext\n\nTo enhance the organization, maintainability, and scalability of our components\nthat utilize the compound component pattern, we are establishing a consistent\ndirectory structure for their implementation. This ADR outlines the principle of\nextracting the core root component and its associated compound sub-components\ninto a dedicated components subdirectory.\n\nDecision\n\nFor any component (<ComponentName>) that foll","_lower":{"title":"adr: standardizing compound component extraction to a `components` directory","description":"architecture decision record on organizing compound component implementations","tags":"architecture components directory-structure organization","content":"adr: standardizing compound component extraction to a components directory\n\ncontext\n\nto enhance the organization, maintainability, and scalability of our components\nthat utilize the compound component pattern, we are establishing a consistent\ndirectory structure for their implementation. this adr outlines the principle of\nextracting the core root component and its associated compound sub-components\ninto a dedicated components subdirectory.\n\ndecision\n\nfor any component (<componentname>) that foll","combined":"adr: standardizing compound component extraction to a `components` directory architecture decision record on organizing compound component implementations architecture components directory-structure organization adr: standardizing compound component extraction to a components directory\n\ncontext\n\nto enhance the organization, maintainability, and scalability of our components\nthat utilize the compound component pattern, we are establishing a consistent\ndirectory structure for their implementation. this adr outlines the principle of\nextracting the core root component and its associated compound sub-components\ninto a dedicated components subdirectory.\n\ndecision\n\nfor any component (<componentname>) that foll","titleNoSpaces":"adr:standardizingcompoundcomponentextractiontoa`components`directory","descriptionNoSpaces":"architecturedecisionrecordonorganizingcompoundcomponentimplementations","tagsNoSpaces":"architecturecomponentsdirectory-structureorganization","titleWords":["adr:","standardizing","compound","component","extraction","to","a","`components`","directory"],"descriptionWords":["architecture","decision","record","on","organizing","compound","component","implementations"],"tagsWords":["architecture","components","directory-structure","organization"]}},{"id":"Consumer-Component-APIs","title":"ADR: On Consumer Component API's","description":"Architecture decision record on how to structure component APIs for flexibility and maintainability","tags":["architecture","components","design","api"],"route":"home/contribute/adrs/adr0001-consumer-component-apis","menu":["Home","Contribute","ADR's","ADR0001 Consumer Component APIs"],"content":"ADR: On Consumer Component API's\n\nContext\n\nWe needed an Alert component to show informational or warning messages. The\ncomponent should allow:\n\n- A title and description.\n- An optional dismiss button.\n- Additional buttons or controls.\n- Spacing/styling overrides (e.g. px, py).\n\nIn early explorations, we tried to expose everything via props on the main\nAlert—this seemed convenient but would quickly became unwieldy when\nrequirements changed. This led to a discussion about how to structure the API\n","_lower":{"title":"adr: on consumer component api's","description":"architecture decision record on how to structure component apis for flexibility and maintainability","tags":"architecture components design api","content":"adr: on consumer component api's\n\ncontext\n\nwe needed an alert component to show informational or warning messages. the\ncomponent should allow:\n\n- a title and description.\n- an optional dismiss button.\n- additional buttons or controls.\n- spacing/styling overrides (e.g. px, py).\n\nin early explorations, we tried to expose everything via props on the main\nalert—this seemed convenient but would quickly became unwieldy when\nrequirements changed. this led to a discussion about how to structure the api\n","combined":"adr: on consumer component api's architecture decision record on how to structure component apis for flexibility and maintainability architecture components design api adr: on consumer component api's\n\ncontext\n\nwe needed an alert component to show informational or warning messages. the\ncomponent should allow:\n\n- a title and description.\n- an optional dismiss button.\n- additional buttons or controls.\n- spacing/styling overrides (e.g. px, py).\n\nin early explorations, we tried to expose everything via props on the main\nalert—this seemed convenient but would quickly became unwieldy when\nrequirements changed. this led to a discussion about how to structure the api\n","titleNoSpaces":"adr:onconsumercomponentapi's","descriptionNoSpaces":"architecturedecisionrecordonhowtostructurecomponentapisforflexibilityandmaintainability","tagsNoSpaces":"architecturecomponentsdesignapi","titleWords":["adr:","on","consumer","component","api's"],"descriptionWords":["architecture","decision","record","on","how","to","structure","component","apis","for","flexibility","and","maintainability"],"tagsWords":["architecture","components","design","api"]}},{"id":"DesignTokens","title":"Design Tokens","description":"Style definitions (colors, fonts, spacing, etc.) for consistent UI components.","tags":["tokens","design"],"route":"home/design-tokens","menu":["Home","Design Tokens"],"content":"Design Tokens\n\n<CategoryOverview />","_lower":{"title":"design tokens","description":"style definitions (colors, fonts, spacing, etc.) for consistent ui components.","tags":"tokens design","content":"design tokens\n\n<categoryoverview />","combined":"design tokens style definitions (colors, fonts, spacing, etc.) for consistent ui components. tokens design design tokens\n\n<categoryoverview />","titleNoSpaces":"designtokens","descriptionNoSpaces":"styledefinitions(colors,fonts,spacing,etc.)forconsistentuicomponents.","tagsNoSpaces":"tokensdesign","titleWords":["design","tokens"],"descriptionWords":["style","definitions","(colors,","fonts,","spacing,","etc.)","for","consistent","ui","components."],"tagsWords":["tokens","design"]}},{"id":"Home","title":"Home","description":"Start here if you're new.","tags":["forms"],"route":"home","menu":["Home"],"content":"<Frontpage />","_lower":{"title":"home","description":"start here if you're new.","tags":"forms","content":"<frontpage />","combined":"home start here if you're new. forms <frontpage />","titleNoSpaces":"home","descriptionNoSpaces":"starthereifyou'renew.","tagsNoSpaces":"forms","titleWords":["home"],"descriptionWords":["start","here","if","you're","new."],"tagsWords":["forms"]}},{"id":"Home-BundlerPlugins-1749667200000","title":"Bundler Plugins","description":"Webpack and Vite plugins for optional Nimbus dependency resolution","tags":["guide","plugins","webpack","vite","build","optional-dependency"],"route":"home/getting-started/bundler-plugins","menu":["Home","Getting Started","Bundler Plugins"],"content":"Bundler Plugins\n\nNimbus ships Vite and webpack plugins that let build tools treat\n@commercetools/nimbus as an optional dependency. When Nimbus is installed,\nthe plugins are no-ops. When it is not installed, they stub every Nimbus import\nso the build succeeds and zero Nimbus code lands in the bundle.\n\nThe plugins solve build errors, not runtime errors. Stubbed imports resolve\nto undefined — any code that renders a Nimbus component or calls a Nimbus\nfunction will fail at runtime unless it is guard","_lower":{"title":"bundler plugins","description":"webpack and vite plugins for optional nimbus dependency resolution","tags":"guide plugins webpack vite build optional-dependency","content":"bundler plugins\n\nnimbus ships vite and webpack plugins that let build tools treat\n@commercetools/nimbus as an optional dependency. when nimbus is installed,\nthe plugins are no-ops. when it is not installed, they stub every nimbus import\nso the build succeeds and zero nimbus code lands in the bundle.\n\nthe plugins solve build errors, not runtime errors. stubbed imports resolve\nto undefined — any code that renders a nimbus component or calls a nimbus\nfunction will fail at runtime unless it is guard","combined":"bundler plugins webpack and vite plugins for optional nimbus dependency resolution guide plugins webpack vite build optional-dependency bundler plugins\n\nnimbus ships vite and webpack plugins that let build tools treat\n@commercetools/nimbus as an optional dependency. when nimbus is installed,\nthe plugins are no-ops. when it is not installed, they stub every nimbus import\nso the build succeeds and zero nimbus code lands in the bundle.\n\nthe plugins solve build errors, not runtime errors. stubbed imports resolve\nto undefined — any code that renders a nimbus component or calls a nimbus\nfunction will fail at runtime unless it is guard","titleNoSpaces":"bundlerplugins","descriptionNoSpaces":"webpackandvitepluginsforoptionalnimbusdependencyresolution","tagsNoSpaces":"guidepluginswebpackvitebuildoptional-dependency","titleWords":["bundler","plugins"],"descriptionWords":["webpack","and","vite","plugins","for","optional","nimbus","dependency","resolution"],"tagsWords":["guide","plugins","webpack","vite","build","optional-dependency"]}},{"id":"Home-Contribute-1746704391512","title":"Contributing","description":"Contribute to the nimbus development","tags":["guide","contributing","development"],"route":"home/contribute","menu":["Home","Contribute"],"content":"Contributing\n\nContribute to the nimbus development.","_lower":{"title":"contributing","description":"contribute to the nimbus development","tags":"guide contributing development","content":"contributing\n\ncontribute to the nimbus development.","combined":"contributing contribute to the nimbus development guide contributing development contributing\n\ncontribute to the nimbus development.","titleNoSpaces":"contributing","descriptionNoSpaces":"contributetothenimbusdevelopment","tagsNoSpaces":"guidecontributingdevelopment","titleWords":["contributing"],"descriptionWords":["contribute","to","the","nimbus","development"],"tagsWords":["guide","contributing","development"]}},{"id":"Home-Contribute-Setup","title":"Local Development Setup","description":"Set up nimbus for local development","tags":["document"],"route":"home/contribute/development-setup","menu":["Home","Contribute","Development Setup"],"content":"Getting Started\n\nPrerequisites\n\nBefore you begin, make sure you have the following installed:\n\n- Node.js: v22.14.0+\n- PNPM: v9.12.3+\n\nInstallation\n\n1. Clone the repository:\n\n``bash\ngit clone https://github.com/commercetools/nimbus.git\n`\n\n2. Enter the repository directory:\n\n`bash\ncd nimbus\n`\n\n3. Initialize the project:\n\n`bash\npnpm nimbus:init\n`\n\nDevelopment\n\nStarting the Development Environment\n\nStart the development environment with the following command:\n\n`bash\npnpm start\n`\n\nThis will start bot","_lower":{"title":"local development setup","description":"set up nimbus for local development","tags":"document","content":"getting started\n\nprerequisites\n\nbefore you begin, make sure you have the following installed:\n\n- node.js: v22.14.0+\n- pnpm: v9.12.3+\n\ninstallation\n\n1. clone the repository:\n\n``bash\ngit clone https://github.com/commercetools/nimbus.git\n`\n\n2. enter the repository directory:\n\n`bash\ncd nimbus\n`\n\n3. initialize the project:\n\n`bash\npnpm nimbus:init\n`\n\ndevelopment\n\nstarting the development environment\n\nstart the development environment with the following command:\n\n`bash\npnpm start\n`\n\nthis will start bot","combined":"local development setup set up nimbus for local development document getting started\n\nprerequisites\n\nbefore you begin, make sure you have the following installed:\n\n- node.js: v22.14.0+\n- pnpm: v9.12.3+\n\ninstallation\n\n1. clone the repository:\n\n``bash\ngit clone https://github.com/commercetools/nimbus.git\n`\n\n2. enter the repository directory:\n\n`bash\ncd nimbus\n`\n\n3. initialize the project:\n\n`bash\npnpm nimbus:init\n`\n\ndevelopment\n\nstarting the development environment\n\nstart the development environment with the following command:\n\n`bash\npnpm start\n`\n\nthis will start bot","titleNoSpaces":"localdevelopmentsetup","descriptionNoSpaces":"setupnimbusforlocaldevelopment","tagsNoSpaces":"document","titleWords":["local","development","setup"],"descriptionWords":["set","up","nimbus","for","local","development"],"tagsWords":["document"]}},{"id":"Home-Core Concepts","title":"Core Concepts","description":"Quick start guide to set up and use the package.","tags":["document"],"route":"home/getting-started/core-concepts","menu":["Home","Getting Started","Core Concepts"],"content":"Core concepts\n\nThis page is designed to help you understand the foundational concepts so that\nyou can get quickly started with using the Nimbus Design System in your\nprojects.\n\nNimbus aims to provide a comprehensive suite of accessible and pre-themed React components, enabling developers to build beautiful and consistent user interfaces with ease. However, it's important to understand the following underlying concepts to make the most of the system.\n\nTechnical foundation\n\n- Nimbus is a react com","_lower":{"title":"core concepts","description":"quick start guide to set up and use the package.","tags":"document","content":"core concepts\n\nthis page is designed to help you understand the foundational concepts so that\nyou can get quickly started with using the nimbus design system in your\nprojects.\n\nnimbus aims to provide a comprehensive suite of accessible and pre-themed react components, enabling developers to build beautiful and consistent user interfaces with ease. however, it's important to understand the following underlying concepts to make the most of the system.\n\ntechnical foundation\n\n- nimbus is a react com","combined":"core concepts quick start guide to set up and use the package. document core concepts\n\nthis page is designed to help you understand the foundational concepts so that\nyou can get quickly started with using the nimbus design system in your\nprojects.\n\nnimbus aims to provide a comprehensive suite of accessible and pre-themed react components, enabling developers to build beautiful and consistent user interfaces with ease. however, it's important to understand the following underlying concepts to make the most of the system.\n\ntechnical foundation\n\n- nimbus is a react com","titleNoSpaces":"coreconcepts","descriptionNoSpaces":"quickstartguidetosetupandusethepackage.","tagsNoSpaces":"document","titleWords":["core","concepts"],"descriptionWords":["quick","start","guide","to","set","up","and","use","the","package."],"tagsWords":["document"]}},{"id":"Home-Installation-1746704940030","title":"Installation","description":"How to add Nimbus to your react frontend","tags":["guide","setup","installation"],"route":"home/getting-started/installation","menu":["Home","Getting Started","Installation"],"content":"Installation\n\nHow to add Nimbus to your react frontend.\n\n1. Install the nimbus packages\n\nYou can install Nimbus using your preferred package manager.\n\nCore Installation\n\nInstall the core Nimbus packages along with required peer dependencies:\n\npnpm\n\n``bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nnpm\n\n`bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nyarn\n\n`bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @","_lower":{"title":"installation","description":"how to add nimbus to your react frontend","tags":"guide setup installation","content":"installation\n\nhow to add nimbus to your react frontend.\n\n1. install the nimbus packages\n\nyou can install nimbus using your preferred package manager.\n\ncore installation\n\ninstall the core nimbus packages along with required peer dependencies:\n\npnpm\n\n``bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nnpm\n\n`bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nyarn\n\n`bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @","combined":"installation how to add nimbus to your react frontend guide setup installation installation\n\nhow to add nimbus to your react frontend.\n\n1. install the nimbus packages\n\nyou can install nimbus using your preferred package manager.\n\ncore installation\n\ninstall the core nimbus packages along with required peer dependencies:\n\npnpm\n\n``bash\npnpm add @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nnpm\n\n`bash\nnpm install @commercetools/nimbus @commercetools/nimbus-icons @chakra-ui/react\n`\n\nyarn\n\n`bash\nyarn add @commercetools/nimbus @commercetools/nimbus-icons @","titleNoSpaces":"installation","descriptionNoSpaces":"howtoaddnimbustoyourreactfrontend","tagsNoSpaces":"guidesetupinstallation","titleWords":["installation"],"descriptionWords":["how","to","add","nimbus","to","your","react","frontend"],"tagsWords":["guide","setup","installation"]}},{"id":"Home-MCP-Overview","title":"MCP Server Overview","description":"What the Nimbus MCP server is, what it enables, and which AI assistants it supports","tags":["mcp","ai","developer-tools"],"route":"home/getting-started/mcp-server-overview","menu":["Home","Getting Started","MCP Server Overview"],"content":"MCP Server Overview\n\nIf you use an AI coding assistant (Claude, Copilot, Cursor, etc.), the Nimbus\nMCP server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nThe Nimbus MCP Server (@commercetools/nimbus-mcp) exposes component\ndocumentation, design tokens, and icons to AI assistants through the\nModel Context Protocol (MCP), so they can\nproduce code that follows Nimbus conventions out of the box.\n\nWhat Is MCP?\n\nThe Model Context Protocol is an open sta","_lower":{"title":"mcp server overview","description":"what the nimbus mcp server is, what it enables, and which ai assistants it supports","tags":"mcp ai developer-tools","content":"mcp server overview\n\nif you use an ai coding assistant (claude, copilot, cursor, etc.), the nimbus\nmcp server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nthe nimbus mcp server (@commercetools/nimbus-mcp) exposes component\ndocumentation, design tokens, and icons to ai assistants through the\nmodel context protocol (mcp), so they can\nproduce code that follows nimbus conventions out of the box.\n\nwhat is mcp?\n\nthe model context protocol is an open sta","combined":"mcp server overview what the nimbus mcp server is, what it enables, and which ai assistants it supports mcp ai developer-tools mcp server overview\n\nif you use an ai coding assistant (claude, copilot, cursor, etc.), the nimbus\nmcp server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nthe nimbus mcp server (@commercetools/nimbus-mcp) exposes component\ndocumentation, design tokens, and icons to ai assistants through the\nmodel context protocol (mcp), so they can\nproduce code that follows nimbus conventions out of the box.\n\nwhat is mcp?\n\nthe model context protocol is an open sta","titleNoSpaces":"mcpserveroverview","descriptionNoSpaces":"whatthenimbusmcpserveris,whatitenables,andwhichaiassistantsitsupports","tagsNoSpaces":"mcpaideveloper-tools","titleWords":["mcp","server","overview"],"descriptionWords":["what","the","nimbus","mcp","server","is,","what","it","enables,","and","which","ai","assistants","it","supports"],"tagsWords":["mcp","ai","developer-tools"]}},{"id":"Home-MCP-Setup","title":"MCP Server Setup","description":"Install and configure the Nimbus MCP server for your AI assistant","tags":["mcp","ai","developer-tools","setup"],"route":"home/getting-started/mcp-server-setup","menu":["Home","Getting Started","MCP Server Setup"],"content":"MCP Server Setup\n\nThis guide walks through installing the Nimbus MCP server and configuring it for\nyour AI assistant. Setup takes about two minutes.\n\nPrerequisites\n\n- Node.js v18 or later (includes npx)\n- An AI assistant that supports MCP (see\n  supported assistants)\n\nHow It Works\n\nYou don't run the MCP server yourself. Instead, you add a small JSON config to\nyour AI assistant telling it _how_ to start the server. The assistant launches\nthe server automatically when a session begins and communic","_lower":{"title":"mcp server setup","description":"install and configure the nimbus mcp server for your ai assistant","tags":"mcp ai developer-tools setup","content":"mcp server setup\n\nthis guide walks through installing the nimbus mcp server and configuring it for\nyour ai assistant. setup takes about two minutes.\n\nprerequisites\n\n- node.js v18 or later (includes npx)\n- an ai assistant that supports mcp (see\n  supported assistants)\n\nhow it works\n\nyou don't run the mcp server yourself. instead, you add a small json config to\nyour ai assistant telling it _how_ to start the server. the assistant launches\nthe server automatically when a session begins and communic","combined":"mcp server setup install and configure the nimbus mcp server for your ai assistant mcp ai developer-tools setup mcp server setup\n\nthis guide walks through installing the nimbus mcp server and configuring it for\nyour ai assistant. setup takes about two minutes.\n\nprerequisites\n\n- node.js v18 or later (includes npx)\n- an ai assistant that supports mcp (see\n  supported assistants)\n\nhow it works\n\nyou don't run the mcp server yourself. instead, you add a small json config to\nyour ai assistant telling it _how_ to start the server. the assistant launches\nthe server automatically when a session begins and communic","titleNoSpaces":"mcpserversetup","descriptionNoSpaces":"installandconfigurethenimbusmcpserverforyouraiassistant","tagsNoSpaces":"mcpaideveloper-toolssetup","titleWords":["mcp","server","setup"],"descriptionWords":["install","and","configure","the","nimbus","mcp","server","for","your","ai","assistant"],"tagsWords":["mcp","ai","developer-tools","setup"]}},{"id":"Home-Playground","title":"Playground","description":"collection of pages with an explorative character","tags":["playground","exploring"],"route":"home/playground","menu":["Home","Playground"],"content":"Playground\n\nThis is the place to try out things.","_lower":{"title":"playground","description":"collection of pages with an explorative character","tags":"playground exploring","content":"playground\n\nthis is the place to try out things.","combined":"playground collection of pages with an explorative character playground exploring playground\n\nthis is the place to try out things.","titleNoSpaces":"playground","descriptionNoSpaces":"collectionofpageswithanexplorativecharacter","tagsNoSpaces":"playgroundexploring","titleWords":["playground"],"descriptionWords":["collection","of","pages","with","an","explorative","character"],"tagsWords":["playground","exploring"]}},{"id":"Home-Release-Process","title":"Release Process","description":"How Nimbus releases work and how to stay informed","tags":["releases","versioning","upgrades","support"],"route":"home/getting-started/release-process","menu":["Home","Getting Started","Release Process"],"content":"Release Process\n\nThis page explains how Nimbus releases work, what to expect from each release\ntype, and how to stay informed about changes that may affect your application.\n\nRelease Cadence\n\nNimbus follows Semantic Versioning:\n\n| Release Type      | Frequency    | Contents                           |\n| ----------------- | ------------ | ---------------------------------- |\n| Major (X.0.0) | As needed    | Breaking changes, major features   |\n| Minor (x.Y.0) | As needed    | New features, non-br","_lower":{"title":"release process","description":"how nimbus releases work and how to stay informed","tags":"releases versioning upgrades support","content":"release process\n\nthis page explains how nimbus releases work, what to expect from each release\ntype, and how to stay informed about changes that may affect your application.\n\nrelease cadence\n\nnimbus follows semantic versioning:\n\n| release type      | frequency    | contents                           |\n| ----------------- | ------------ | ---------------------------------- |\n| major (x.0.0) | as needed    | breaking changes, major features   |\n| minor (x.y.0) | as needed    | new features, non-br","combined":"release process how nimbus releases work and how to stay informed releases versioning upgrades support release process\n\nthis page explains how nimbus releases work, what to expect from each release\ntype, and how to stay informed about changes that may affect your application.\n\nrelease cadence\n\nnimbus follows semantic versioning:\n\n| release type      | frequency    | contents                           |\n| ----------------- | ------------ | ---------------------------------- |\n| major (x.0.0) | as needed    | breaking changes, major features   |\n| minor (x.y.0) | as needed    | new features, non-br","titleNoSpaces":"releaseprocess","descriptionNoSpaces":"hownimbusreleasesworkandhowtostayinformed","tagsNoSpaces":"releasesversioningupgradessupport","titleWords":["release","process"],"descriptionWords":["how","nimbus","releases","work","and","how","to","stay","informed"],"tagsWords":["releases","versioning","upgrades","support"]}},{"id":"Home-Style Props","title":"Style Props","description":"JSX style props for applying CSS rules","tags":["document"],"route":"home/style-props","menu":["Home","Style Props"],"content":"Style Props\n\nJSX style props for applying CSS rules\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"style props","description":"jsx style props for applying css rules","tags":"document","content":"style props\n\njsx style props for applying css rules\n\n<categoryoverview variant=\"list\" />","combined":"style props jsx style props for applying css rules document style props\n\njsx style props for applying css rules\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"styleprops","descriptionNoSpaces":"jsxstylepropsforapplyingcssrules","tagsNoSpaces":"document","titleWords":["style","props"],"descriptionWords":["jsx","style","props","for","applying","css","rules"],"tagsWords":["document"]}},{"id":"Home-Testing-Setup","title":"Testing Setup","description":"Configure Jest or Vitest to test Nimbus components","tags":["guide","testing","jest","vitest"],"route":"home/getting-started/testing-setup","menu":["Home","Getting Started","Testing Setup"],"content":"Testing Setup\n\nNimbus components require specific polyfills to work in JSDOM test environments (Jest, Vitest). This guide shows you how to configure your test runner to work with Nimbus.\n\nWhy JSDOM Polyfills?\n\nJSDOM is a headless browser environment used by Jest and Vitest. It doesn't include all browser APIs that Chakra UI and React Aria (which Nimbus is built on) depend on. Nimbus provides polyfills for these missing APIs.\n\nThe polyfills include:\n- structuredClone - Required by Chakra UI for t","_lower":{"title":"testing setup","description":"configure jest or vitest to test nimbus components","tags":"guide testing jest vitest","content":"testing setup\n\nnimbus components require specific polyfills to work in jsdom test environments (jest, vitest). this guide shows you how to configure your test runner to work with nimbus.\n\nwhy jsdom polyfills?\n\njsdom is a headless browser environment used by jest and vitest. it doesn't include all browser apis that chakra ui and react aria (which nimbus is built on) depend on. nimbus provides polyfills for these missing apis.\n\nthe polyfills include:\n- structuredclone - required by chakra ui for t","combined":"testing setup configure jest or vitest to test nimbus components guide testing jest vitest testing setup\n\nnimbus components require specific polyfills to work in jsdom test environments (jest, vitest). this guide shows you how to configure your test runner to work with nimbus.\n\nwhy jsdom polyfills?\n\njsdom is a headless browser environment used by jest and vitest. it doesn't include all browser apis that chakra ui and react aria (which nimbus is built on) depend on. nimbus provides polyfills for these missing apis.\n\nthe polyfills include:\n- structuredclone - required by chakra ui for t","titleNoSpaces":"testingsetup","descriptionNoSpaces":"configurejestorvitesttotestnimbuscomponents","tagsNoSpaces":"guidetestingjestvitest","titleWords":["testing","setup"],"descriptionWords":["configure","jest","or","vitest","to","test","nimbus","components"],"tagsWords":["guide","testing","jest","vitest"]}},{"id":"Hooke","title":"Hooke","description":"react hooks","tags":["hooks","react"],"route":"hooks","menu":["Hooks"],"content":"Hooks\n\nA collection of useful react hooks.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"hooke","description":"react hooks","tags":"hooks react","content":"hooks\n\na collection of useful react hooks.\n\n<categoryoverview variant=\"list\" />","combined":"hooke react hooks hooks react hooks\n\na collection of useful react hooks.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"hooke","descriptionNoSpaces":"reacthooks","tagsNoSpaces":"hooksreact","titleWords":["hooke"],"descriptionWords":["react","hooks"],"tagsWords":["hooks","react"]}},{"id":"Icons","title":"Icons","description":"display Icons","tags":["icons"],"route":"icons","menu":["Icons"],"content":"Icons\n\nIcons come from a separate package. Each Icon is a react component that can be\nused in any other component.\n\n> [!NOTE]  \n> If you can't find a fitting Icon, you may want to use the external\n> material ui icon search\n> as the search below does not have access to Icon meta-data, only to\n> component-names.\n\nHere is the list of available icons:\n\n<IconSearch />","_lower":{"title":"icons","description":"display icons","tags":"icons","content":"icons\n\nicons come from a separate package. each icon is a react component that can be\nused in any other component.\n\n> [!note]  \n> if you can't find a fitting icon, you may want to use the external\n> material ui icon search\n> as the search below does not have access to icon meta-data, only to\n> component-names.\n\nhere is the list of available icons:\n\n<iconsearch />","combined":"icons display icons icons icons\n\nicons come from a separate package. each icon is a react component that can be\nused in any other component.\n\n> [!note]  \n> if you can't find a fitting icon, you may want to use the external\n> material ui icon search\n> as the search below does not have access to icon meta-data, only to\n> component-names.\n\nhere is the list of available icons:\n\n<iconsearch />","titleNoSpaces":"icons","descriptionNoSpaces":"displayicons","tagsNoSpaces":"icons","titleWords":["icons"],"descriptionWords":["display","icons"],"tagsWords":["icons"]}},{"id":"Layout","title":"Layout","description":"Components that structure the content on the page.","tags":["layout"],"route":"components/layout","menu":["Components","Layout"],"content":"Layout\n\nComponents that structure the content on the page.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"layout","description":"components that structure the content on the page.","tags":"layout","content":"layout\n\ncomponents that structure the content on the page.\n\n<categoryoverview variant=\"list\" />","combined":"layout components that structure the content on the page. layout layout\n\ncomponents that structure the content on the page.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"layout","descriptionNoSpaces":"componentsthatstructurethecontentonthepage.","tagsNoSpaces":"layout","titleWords":["layout"],"descriptionWords":["components","that","structure","the","content","on","the","page."],"tagsWords":["layout"]}},{"id":"Markdown","title":"Markdown","description":"a page with many mdx & markdown features","tags":["playground","markdown","mdx"],"route":"home/playground/markdown","menu":["Home","Playground","Markdown"],"content":"Markdown / MDX Stress Test\n\nThis is a page to stress test markdown & mdx syntax usages to see if everything\nrenders without issues.\n\nBasic Markdown\n\nBasic markdown is supported.\n\nHeadings\n\nSee the bold Text above? This is a heading. Not gonna demonstrate them, they are\nused everwhere on a page, but this is what you'd use in markdown or mdx files to\nwrite one:\n\n``markdown\nH1 Most important\n\nH2 Heading\n\nH3 Heading\n\nH4 Heading\n\nH5 Heading\n\nH6 Least important\n`\n\nEmphasizing Text\n\nItalic Text\n\n_Itali","_lower":{"title":"markdown","description":"a page with many mdx & markdown features","tags":"playground markdown mdx","content":"markdown / mdx stress test\n\nthis is a page to stress test markdown & mdx syntax usages to see if everything\nrenders without issues.\n\nbasic markdown\n\nbasic markdown is supported.\n\nheadings\n\nsee the bold text above? this is a heading. not gonna demonstrate them, they are\nused everwhere on a page, but this is what you'd use in markdown or mdx files to\nwrite one:\n\n``markdown\nh1 most important\n\nh2 heading\n\nh3 heading\n\nh4 heading\n\nh5 heading\n\nh6 least important\n`\n\nemphasizing text\n\nitalic text\n\n_itali","combined":"markdown a page with many mdx & markdown features playground markdown mdx markdown / mdx stress test\n\nthis is a page to stress test markdown & mdx syntax usages to see if everything\nrenders without issues.\n\nbasic markdown\n\nbasic markdown is supported.\n\nheadings\n\nsee the bold text above? this is a heading. not gonna demonstrate them, they are\nused everwhere on a page, but this is what you'd use in markdown or mdx files to\nwrite one:\n\n``markdown\nh1 most important\n\nh2 heading\n\nh3 heading\n\nh4 heading\n\nh5 heading\n\nh6 least important\n`\n\nemphasizing text\n\nitalic text\n\n_itali","titleNoSpaces":"markdown","descriptionNoSpaces":"apagewithmanymdx&markdownfeatures","tagsNoSpaces":"playgroundmarkdownmdx","titleWords":["markdown"],"descriptionWords":["a","page","with","many","mdx","&","markdown","features"],"tagsWords":["playground","markdown","mdx"]}},{"id":"Media","title":"Media","description":"Components for displaying media content.","tags":["media"],"route":"components/media","menu":["Components","Media"],"content":"Media\n\nComponents for displaying media content.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"media","description":"components for displaying media content.","tags":"media","content":"media\n\ncomponents for displaying media content.\n\n<categoryoverview variant=\"list\" />","combined":"media components for displaying media content. media media\n\ncomponents for displaying media content.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"media","descriptionNoSpaces":"componentsfordisplayingmediacontent.","tagsNoSpaces":"media","titleWords":["media"],"descriptionWords":["components","for","displaying","media","content."],"tagsWords":["media"]}},{"id":"NimbusExportStats","title":"Nimbus Export Stats","description":"List of exports from the @commercetools/nimbus package","tags":["stats","exports"],"route":"home/contribute/stats","menu":["Home","Contribute","Stats"],"content":"Nimbus Exports Stats\n\nThis page provides a list of all exports from the @commercetools/nimbus package.\n\n<NimbusExportsList />","_lower":{"title":"nimbus export stats","description":"list of exports from the @commercetools/nimbus package","tags":"stats exports","content":"nimbus exports stats\n\nthis page provides a list of all exports from the @commercetools/nimbus package.\n\n<nimbusexportslist />","combined":"nimbus export stats list of exports from the @commercetools/nimbus package stats exports nimbus exports stats\n\nthis page provides a list of all exports from the @commercetools/nimbus package.\n\n<nimbusexportslist />","titleNoSpaces":"nimbusexportstats","descriptionNoSpaces":"listofexportsfromthe@commercetools/nimbuspackage","tagsNoSpaces":"statsexports","titleWords":["nimbus","export","stats"],"descriptionWords":["list","of","exports","from","the","@commercetools/nimbus","package"],"tagsWords":["stats","exports"]}},{"id":"Patterns","title":"Patterns","description":"Reusable component patterns and compositions for common use cases","tags":["patterns","compositions","recipes"],"route":"patterns","menu":["Patterns"],"content":"Patterns\n\nA collection of reusable component patterns and compositions that combine multiple components to solve common UI challenges.\n\n<CategoryOverview variant=\"list\" />","_lower":{"title":"patterns","description":"reusable component patterns and compositions for common use cases","tags":"patterns compositions recipes","content":"patterns\n\na collection of reusable component patterns and compositions that combine multiple components to solve common ui challenges.\n\n<categoryoverview variant=\"list\" />","combined":"patterns reusable component patterns and compositions for common use cases patterns compositions recipes patterns\n\na collection of reusable component patterns and compositions that combine multiple components to solve common ui challenges.\n\n<categoryoverview variant=\"list\" />","titleNoSpaces":"patterns","descriptionNoSpaces":"reusablecomponentpatternsandcompositionsforcommonusecases","tagsNoSpaces":"patternscompositionsrecipes","titleWords":["patterns"],"descriptionWords":["reusable","component","patterns","and","compositions","for","common","use","cases"],"tagsWords":["patterns","compositions","recipes"]}},{"id":"Patterns-Actions","title":"Actions","description":"Pre-composed action patterns for common form and page controls","tags":["patterns","actions","forms"],"route":"patterns/actions","menu":["Patterns","Actions"],"content":"Actions\n\nAction patterns provide pre-composed sets of controls for common form and page interactions. Use them to avoid hand-composing button groups and wiring up save, cancel, and delete behavior from scratch.\n\nWhen to use action patterns\n\nAction patterns are ideal for:\n- Standard form footers that need save, cancel, and optional delete controls\n- Reducing boilerplate for repeated action bar shapes across an app\n- Ensuring consistent button ordering and keyboard behavior\n\nFor action bars with n","_lower":{"title":"actions","description":"pre-composed action patterns for common form and page controls","tags":"patterns actions forms","content":"actions\n\naction patterns provide pre-composed sets of controls for common form and page interactions. use them to avoid hand-composing button groups and wiring up save, cancel, and delete behavior from scratch.\n\nwhen to use action patterns\n\naction patterns are ideal for:\n- standard form footers that need save, cancel, and optional delete controls\n- reducing boilerplate for repeated action bar shapes across an app\n- ensuring consistent button ordering and keyboard behavior\n\nfor action bars with n","combined":"actions pre-composed action patterns for common form and page controls patterns actions forms actions\n\naction patterns provide pre-composed sets of controls for common form and page interactions. use them to avoid hand-composing button groups and wiring up save, cancel, and delete behavior from scratch.\n\nwhen to use action patterns\n\naction patterns are ideal for:\n- standard form footers that need save, cancel, and optional delete controls\n- reducing boilerplate for repeated action bar shapes across an app\n- ensuring consistent button ordering and keyboard behavior\n\nfor action bars with n","titleNoSpaces":"actions","descriptionNoSpaces":"pre-composedactionpatternsforcommonformandpagecontrols","tagsNoSpaces":"patternsactionsforms","titleWords":["actions"],"descriptionWords":["pre-composed","action","patterns","for","common","form","and","page","controls"],"tagsWords":["patterns","actions","forms"]}},{"id":"Patterns-ConfirmationDialog","title":"Confirmation dialog","exportName":"ConfirmationDialog","description":"A pre-composed confirm/cancel dialog with a flat, opinionated API.","tags":["component","pattern","dialog","ConfirmationDialog"],"route":"patterns/dialogs/confirmation-dialog","menu":["Patterns","Dialogs","Confirmation dialog"],"content":"Overview\n\nConfirmationDialog is a pattern component that wraps the Dialog primitive plus two Buttons in a flat, opinionated API for the most common confirm/cancel dialog shape: a title, a body, two action callbacks, and optional state and intent props. It is the recommended replacement for the Merchant Center Application Kit's ConfirmationDialog.\n\nThe pattern exposes a small, flat set of props — title, children, onConfirm, onCancel, plus optional state, label, intent, and accessibility props — a","_lower":{"title":"confirmation dialog","description":"a pre-composed confirm/cancel dialog with a flat, opinionated api.","tags":"component pattern dialog confirmationdialog","content":"overview\n\nconfirmationdialog is a pattern component that wraps the dialog primitive plus two buttons in a flat, opinionated api for the most common confirm/cancel dialog shape: a title, a body, two action callbacks, and optional state and intent props. it is the recommended replacement for the merchant center application kit's confirmationdialog.\n\nthe pattern exposes a small, flat set of props — title, children, onconfirm, oncancel, plus optional state, label, intent, and accessibility props — a","combined":"confirmation dialog a pre-composed confirm/cancel dialog with a flat, opinionated api. component pattern dialog confirmationdialog overview\n\nconfirmationdialog is a pattern component that wraps the dialog primitive plus two buttons in a flat, opinionated api for the most common confirm/cancel dialog shape: a title, a body, two action callbacks, and optional state and intent props. it is the recommended replacement for the merchant center application kit's confirmationdialog.\n\nthe pattern exposes a small, flat set of props — title, children, onconfirm, oncancel, plus optional state, label, intent, and accessibility props — a","titleNoSpaces":"confirmationdialog","descriptionNoSpaces":"apre-composedconfirm/canceldialogwithaflat,opinionatedapi.","tagsNoSpaces":"componentpatterndialogconfirmationdialog","titleWords":["confirmation","dialog"],"descriptionWords":["a","pre-composed","confirm/cancel","dialog","with","a","flat,","opinionated","api."],"tagsWords":["component","pattern","dialog","confirmationdialog"]}},{"id":"Patterns-DateRangePickerField","title":"Date range picker field","exportName":"DateRangePickerField","description":"This pattern component integrates the DateRangePicker within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","DateRangePicker","DateRangePickerField"],"route":"patterns/fields/date-range-picker-field","menu":["Patterns","Fields","Date range picker field"],"content":"Overview\n\nDateRangePickerField is a pattern component that combines the FormField wrapper with the DateRangePicker input component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nResources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guide","_lower":{"title":"date range picker field","description":"this pattern component integrates the daterangepicker within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field daterangepicker daterangepickerfield","content":"overview\n\ndaterangepickerfield is a pattern component that combines the formfield wrapper with the daterangepicker input component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guide","combined":"date range picker field this pattern component integrates the daterangepicker within a formfield using a simple, consistent, and opinionated api. component pattern field daterangepicker daterangepickerfield overview\n\ndaterangepickerfield is a pattern component that combines the formfield wrapper with the daterangepicker input component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guide","titleNoSpaces":"daterangepickerfield","descriptionNoSpaces":"thispatterncomponentintegratesthedaterangepickerwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfielddaterangepickerdaterangepickerfield","titleWords":["date","range","picker","field"],"descriptionWords":["this","pattern","component","integrates","the","daterangepicker","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","daterangepicker","daterangepickerfield"]}},{"id":"Patterns-Dialogs","title":"Dialogs","description":"Pre-composed dialog patterns built on top of the Dialog primitive for common read-only and confirmation scenarios","tags":["patterns","dialogs","overlays"],"route":"patterns/dialogs","menu":["Patterns","Dialogs"],"content":"Dialogs\n\nDialog pattern components wrap the Dialog primitive in small, opinionated APIs for the most common dialog shapes. Use them to avoid hand-composing Dialog.Root, Dialog.Content, Dialog.Header, Dialog.Title, Dialog.Body, Dialog.Footer, and Dialog.CloseTrigger for everyday cases.\n\nWhen to use dialog patterns\n\nDialog patterns are ideal for:\n- Confirm/cancel decision dialogs (delete, discard, publish, submit) — see ConfirmationDialog\n- Read-only informational dialogs (help text, details, meta","_lower":{"title":"dialogs","description":"pre-composed dialog patterns built on top of the dialog primitive for common read-only and confirmation scenarios","tags":"patterns dialogs overlays","content":"dialogs\n\ndialog pattern components wrap the dialog primitive in small, opinionated apis for the most common dialog shapes. use them to avoid hand-composing dialog.root, dialog.content, dialog.header, dialog.title, dialog.body, dialog.footer, and dialog.closetrigger for everyday cases.\n\nwhen to use dialog patterns\n\ndialog patterns are ideal for:\n- confirm/cancel decision dialogs (delete, discard, publish, submit) — see confirmationdialog\n- read-only informational dialogs (help text, details, meta","combined":"dialogs pre-composed dialog patterns built on top of the dialog primitive for common read-only and confirmation scenarios patterns dialogs overlays dialogs\n\ndialog pattern components wrap the dialog primitive in small, opinionated apis for the most common dialog shapes. use them to avoid hand-composing dialog.root, dialog.content, dialog.header, dialog.title, dialog.body, dialog.footer, and dialog.closetrigger for everyday cases.\n\nwhen to use dialog patterns\n\ndialog patterns are ideal for:\n- confirm/cancel decision dialogs (delete, discard, publish, submit) — see confirmationdialog\n- read-only informational dialogs (help text, details, meta","titleNoSpaces":"dialogs","descriptionNoSpaces":"pre-composeddialogpatternsbuiltontopofthedialogprimitiveforcommonread-onlyandconfirmationscenarios","tagsNoSpaces":"patternsdialogsoverlays","titleWords":["dialogs"],"descriptionWords":["pre-composed","dialog","patterns","built","on","top","of","the","dialog","primitive","for","common","read-only","and","confirmation","scenarios"],"tagsWords":["patterns","dialogs","overlays"]}},{"id":"Patterns-Fields","title":"Fields","description":"Field pattern components that integrate inputs within FormField for consistent form layouts","tags":["patterns","fields","forms"],"route":"patterns/fields","menu":["Patterns","Fields"],"content":"Fields\n\nField pattern components provide a consistent way to integrate input components within FormField wrappers. These patterns simplify form building by combining labels, descriptions, validation, and error handling into a single, opinionated API.\n\nWhen to use field patterns\n\nField patterns are ideal for:\n- Building standard forms with consistent field layouts\n- Reducing boilerplate in form code\n- Ensuring accessibility best practices across all form fields\n- Integrating with form libraries l","_lower":{"title":"fields","description":"field pattern components that integrate inputs within formfield for consistent form layouts","tags":"patterns fields forms","content":"fields\n\nfield pattern components provide a consistent way to integrate input components within formfield wrappers. these patterns simplify form building by combining labels, descriptions, validation, and error handling into a single, opinionated api.\n\nwhen to use field patterns\n\nfield patterns are ideal for:\n- building standard forms with consistent field layouts\n- reducing boilerplate in form code\n- ensuring accessibility best practices across all form fields\n- integrating with form libraries l","combined":"fields field pattern components that integrate inputs within formfield for consistent form layouts patterns fields forms fields\n\nfield pattern components provide a consistent way to integrate input components within formfield wrappers. these patterns simplify form building by combining labels, descriptions, validation, and error handling into a single, opinionated api.\n\nwhen to use field patterns\n\nfield patterns are ideal for:\n- building standard forms with consistent field layouts\n- reducing boilerplate in form code\n- ensuring accessibility best practices across all form fields\n- integrating with form libraries l","titleNoSpaces":"fields","descriptionNoSpaces":"fieldpatterncomponentsthatintegrateinputswithinformfieldforconsistentformlayouts","tagsNoSpaces":"patternsfieldsforms","titleWords":["fields"],"descriptionWords":["field","pattern","components","that","integrate","inputs","within","formfield","for","consistent","form","layouts"],"tagsWords":["patterns","fields","forms"]}},{"id":"Patterns-FormActionBar","title":"Form action bar","exportName":"FormActionBar","description":"This pattern component provides standard save/cancel/delete action buttons for form footers, working inside any footer slot.","tags":["component","pattern","actions","Button","Group"],"route":"patterns/actions/form-action-bar","menu":["Patterns","Actions","Form action bar"],"content":"Overview\n\nFormActionBar is a pattern component that composes a Group of action\nButtons for form footers. It replaces the need for separate form-page\nwrappers — one FormActionBar works in any footer slot:\nDefaultPage.Footer, ModalPage.Footer, Drawer.Footer, Dialog.Footer.\n\nAnatomy\n\n- An accessible group wrapper labelled \"Form actions\" (override via\n  aria-label).\n- Optional destructive delete button on the leading edge — only rendered when\n  onDelete is provided.\n- Cancel button (outline) that re","_lower":{"title":"form action bar","description":"this pattern component provides standard save/cancel/delete action buttons for form footers, working inside any footer slot.","tags":"component pattern actions button group","content":"overview\n\nformactionbar is a pattern component that composes a group of action\nbuttons for form footers. it replaces the need for separate form-page\nwrappers — one formactionbar works in any footer slot:\ndefaultpage.footer, modalpage.footer, drawer.footer, dialog.footer.\n\nanatomy\n\n- an accessible group wrapper labelled \"form actions\" (override via\n  aria-label).\n- optional destructive delete button on the leading edge — only rendered when\n  ondelete is provided.\n- cancel button (outline) that re","combined":"form action bar this pattern component provides standard save/cancel/delete action buttons for form footers, working inside any footer slot. component pattern actions button group overview\n\nformactionbar is a pattern component that composes a group of action\nbuttons for form footers. it replaces the need for separate form-page\nwrappers — one formactionbar works in any footer slot:\ndefaultpage.footer, modalpage.footer, drawer.footer, dialog.footer.\n\nanatomy\n\n- an accessible group wrapper labelled \"form actions\" (override via\n  aria-label).\n- optional destructive delete button on the leading edge — only rendered when\n  ondelete is provided.\n- cancel button (outline) that re","titleNoSpaces":"formactionbar","descriptionNoSpaces":"thispatterncomponentprovidesstandardsave/cancel/deleteactionbuttonsforformfooters,workinginsideanyfooterslot.","tagsNoSpaces":"componentpatternactionsbuttongroup","titleWords":["form","action","bar"],"descriptionWords":["this","pattern","component","provides","standard","save/cancel/delete","action","buttons","for","form","footers,","working","inside","any","footer","slot."],"tagsWords":["component","pattern","actions","button","group"]}},{"id":"Patterns-FormDialog","title":"Form dialog","exportName":"FormDialog","description":"A pre-composed save/cancel dialog with a flat, opinionated API for hosting a form in a modal.","tags":["component","pattern","dialog","FormDialog"],"route":"patterns/dialogs/form-dialog","menu":["Patterns","Dialogs","Form dialog"],"content":"Overview\n\nFormDialog is a pattern component that wraps the Dialog primitive plus two Buttons in a flat, opinionated API for the most common form-in-a-modal shape: a title, form content, two action callbacks, and optional state props. It is the recommended replacement for the Merchant Center Application Kit's FormDialog.\n\nThe pattern exposes a small, flat set of props — title, children, onSave, onCancel, plus optional state, label, and accessibility props — and delegates everything else (sizing, ","_lower":{"title":"form dialog","description":"a pre-composed save/cancel dialog with a flat, opinionated api for hosting a form in a modal.","tags":"component pattern dialog formdialog","content":"overview\n\nformdialog is a pattern component that wraps the dialog primitive plus two buttons in a flat, opinionated api for the most common form-in-a-modal shape: a title, form content, two action callbacks, and optional state props. it is the recommended replacement for the merchant center application kit's formdialog.\n\nthe pattern exposes a small, flat set of props — title, children, onsave, oncancel, plus optional state, label, and accessibility props — and delegates everything else (sizing, ","combined":"form dialog a pre-composed save/cancel dialog with a flat, opinionated api for hosting a form in a modal. component pattern dialog formdialog overview\n\nformdialog is a pattern component that wraps the dialog primitive plus two buttons in a flat, opinionated api for the most common form-in-a-modal shape: a title, form content, two action callbacks, and optional state props. it is the recommended replacement for the merchant center application kit's formdialog.\n\nthe pattern exposes a small, flat set of props — title, children, onsave, oncancel, plus optional state, label, and accessibility props — and delegates everything else (sizing, ","titleNoSpaces":"formdialog","descriptionNoSpaces":"apre-composedsave/canceldialogwithaflat,opinionatedapiforhostingaforminamodal.","tagsNoSpaces":"componentpatterndialogformdialog","titleWords":["form","dialog"],"descriptionWords":["a","pre-composed","save/cancel","dialog","with","a","flat,","opinionated","api","for","hosting","a","form","in","a","modal."],"tagsWords":["component","pattern","dialog","formdialog"]}},{"id":"Patterns-InfoDialog","title":"Info dialog","exportName":"InfoDialog","description":"A pre-composed read-only informational dialog with a flat, minimal API.","tags":["component","pattern","dialog","InfoDialog"],"route":"patterns/dialogs/info-dialog","menu":["Patterns","Dialogs","Info dialog"],"content":"Overview\n\nInfoDialog is a pattern component that wraps the Dialog primitive in a flat, minimal API for the most common read-only informational dialog shape: a title, some content, and a close affordance. It is the recommended replacement for the Merchant Center Application Kit's InfoDialog.\n\nThe pattern exposes a small, flat set of props — title, children, and optional isOpen / defaultOpen / onOpenChange / aria-label — and delegates everything else (sizing, stacking, portaling, focus management)","_lower":{"title":"info dialog","description":"a pre-composed read-only informational dialog with a flat, minimal api.","tags":"component pattern dialog infodialog","content":"overview\n\ninfodialog is a pattern component that wraps the dialog primitive in a flat, minimal api for the most common read-only informational dialog shape: a title, some content, and a close affordance. it is the recommended replacement for the merchant center application kit's infodialog.\n\nthe pattern exposes a small, flat set of props — title, children, and optional isopen / defaultopen / onopenchange / aria-label — and delegates everything else (sizing, stacking, portaling, focus management)","combined":"info dialog a pre-composed read-only informational dialog with a flat, minimal api. component pattern dialog infodialog overview\n\ninfodialog is a pattern component that wraps the dialog primitive in a flat, minimal api for the most common read-only informational dialog shape: a title, some content, and a close affordance. it is the recommended replacement for the merchant center application kit's infodialog.\n\nthe pattern exposes a small, flat set of props — title, children, and optional isopen / defaultopen / onopenchange / aria-label — and delegates everything else (sizing, stacking, portaling, focus management)","titleNoSpaces":"infodialog","descriptionNoSpaces":"apre-composedread-onlyinformationaldialogwithaflat,minimalapi.","tagsNoSpaces":"componentpatterndialoginfodialog","titleWords":["info","dialog"],"descriptionWords":["a","pre-composed","read-only","informational","dialog","with","a","flat,","minimal","api."],"tagsWords":["component","pattern","dialog","infodialog"]}},{"id":"Patterns-MoneyInputField","title":"Money input field","exportName":"MoneyInputField","description":"This pattern component integrates the MoneyInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","MoneyInput","MoneyInputField"],"route":"patterns/fields/money-input-field","menu":["Patterns","Fields","Money input field"],"content":"Overview\n\nMoneyInputField is a pattern component that combines the FormField wrapper with the MoneyInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nThe component contains two focusable inputs: a currency selector and an amount input field, providing an intuitive interface for mon","_lower":{"title":"money input field","description":"this pattern component integrates the moneyinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field moneyinput moneyinputfield","content":"overview\n\nmoneyinputfield is a pattern component that combines the formfield wrapper with the moneyinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component contains two focusable inputs: a currency selector and an amount input field, providing an intuitive interface for mon","combined":"money input field this pattern component integrates the moneyinput within a formfield using a simple, consistent, and opinionated api. component pattern field moneyinput moneyinputfield overview\n\nmoneyinputfield is a pattern component that combines the formfield wrapper with the moneyinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component contains two focusable inputs: a currency selector and an amount input field, providing an intuitive interface for mon","titleNoSpaces":"moneyinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthemoneyinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldmoneyinputmoneyinputfield","titleWords":["money","input","field"],"descriptionWords":["this","pattern","component","integrates","the","moneyinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","moneyinput","moneyinputfield"]}},{"id":"Patterns-MultilineTextInputField","title":"Multiline text input field","exportName":"MultilineTextInputField","description":"This pattern component integrates the MultilineTextInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","MultilineTextInput","MultilineTextInputField"],"route":"patterns/fields/multiline-text-input-field","menu":["Patterns","Fields","Multiline text input field"],"content":"Overview\n\nMultilineTextInputField is a pattern component that combines the FormField wrapper with the MultilineTextInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nResources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guide","_lower":{"title":"multiline text input field","description":"this pattern component integrates the multilinetextinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field multilinetextinput multilinetextinputfield","content":"overview\n\nmultilinetextinputfield is a pattern component that combines the formfield wrapper with the multilinetextinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guide","combined":"multiline text input field this pattern component integrates the multilinetextinput within a formfield using a simple, consistent, and opinionated api. component pattern field multilinetextinput multilinetextinputfield overview\n\nmultilinetextinputfield is a pattern component that combines the formfield wrapper with the multilinetextinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guide","titleNoSpaces":"multilinetextinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthemultilinetextinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldmultilinetextinputmultilinetextinputfield","titleWords":["multiline","text","input","field"],"descriptionWords":["this","pattern","component","integrates","the","multilinetextinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","multilinetextinput","multilinetextinputfield"]}},{"id":"Patterns-NumberInputField","title":"Number input field","exportName":"NumberInputField","description":"This pattern component integrates the NumberInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","NumberInput","NumberInputField"],"route":"patterns/fields/number-input-field","menu":["Patterns","Fields","Number input field"],"content":"Overview\n\nNumberInputField is a pattern component that combines the FormField wrapper with the NumberInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nThe component features increment and decrement buttons, keyboard navigation, locale-aware number formatting, and supports min/max ","_lower":{"title":"number input field","description":"this pattern component integrates the numberinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field numberinput numberinputfield","content":"overview\n\nnumberinputfield is a pattern component that combines the formfield wrapper with the numberinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component features increment and decrement buttons, keyboard navigation, locale-aware number formatting, and supports min/max ","combined":"number input field this pattern component integrates the numberinput within a formfield using a simple, consistent, and opinionated api. component pattern field numberinput numberinputfield overview\n\nnumberinputfield is a pattern component that combines the formfield wrapper with the numberinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component features increment and decrement buttons, keyboard navigation, locale-aware number formatting, and supports min/max ","titleNoSpaces":"numberinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthenumberinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldnumberinputnumberinputfield","titleWords":["number","input","field"],"descriptionWords":["this","pattern","component","integrates","the","numberinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","numberinput","numberinputfield"]}},{"id":"Patterns-Pages","title":"Pages","description":"Pre-built page layout patterns for common full-page structures","tags":["patterns","pages","layouts"],"route":"patterns/pages","menu":["Patterns","Pages"],"content":"Pages\n\nPage layout patterns provide pre-built, opinionated layouts for common full-page structures. Use them to avoid hand-composing flex and stack primitives for pages that follow a well-established shape.\n\nWhen to use page patterns\n\nPage patterns are ideal for:\n- Public-facing pages (login, registration, password reset) with a centered, single-column layout\n- Reducing layout boilerplate for pages that appear across multiple apps\n- Ensuring consistent landmark structure and accessibility across","_lower":{"title":"pages","description":"pre-built page layout patterns for common full-page structures","tags":"patterns pages layouts","content":"pages\n\npage layout patterns provide pre-built, opinionated layouts for common full-page structures. use them to avoid hand-composing flex and stack primitives for pages that follow a well-established shape.\n\nwhen to use page patterns\n\npage patterns are ideal for:\n- public-facing pages (login, registration, password reset) with a centered, single-column layout\n- reducing layout boilerplate for pages that appear across multiple apps\n- ensuring consistent landmark structure and accessibility across","combined":"pages pre-built page layout patterns for common full-page structures patterns pages layouts pages\n\npage layout patterns provide pre-built, opinionated layouts for common full-page structures. use them to avoid hand-composing flex and stack primitives for pages that follow a well-established shape.\n\nwhen to use page patterns\n\npage patterns are ideal for:\n- public-facing pages (login, registration, password reset) with a centered, single-column layout\n- reducing layout boilerplate for pages that appear across multiple apps\n- ensuring consistent landmark structure and accessibility across","titleNoSpaces":"pages","descriptionNoSpaces":"pre-builtpagelayoutpatternsforcommonfull-pagestructures","tagsNoSpaces":"patternspageslayouts","titleWords":["pages"],"descriptionWords":["pre-built","page","layout","patterns","for","common","full-page","structures"],"tagsWords":["patterns","pages","layouts"]}},{"id":"Patterns-PasswordInputField","title":"Password input field","exportName":"PasswordInputField","description":"This pattern component integrates the PasswordInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","PasswordInput","PasswordInputField"],"route":"patterns/fields/password-input-field","menu":["Patterns","Fields","Password input field"],"content":"Overview\n\nPasswordInputField is a pattern component that combines the FormField wrapper with the PasswordInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nIt maintains all functionality of the underlying PasswordInput, including the visibility toggle.\n\nResources\n\nFor detailed guid","_lower":{"title":"password input field","description":"this pattern component integrates the passwordinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field passwordinput passwordinputfield","content":"overview\n\npasswordinputfield is a pattern component that combines the formfield wrapper with the passwordinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nit maintains all functionality of the underlying passwordinput, including the visibility toggle.\n\nresources\n\nfor detailed guid","combined":"password input field this pattern component integrates the passwordinput within a formfield using a simple, consistent, and opinionated api. component pattern field passwordinput passwordinputfield overview\n\npasswordinputfield is a pattern component that combines the formfield wrapper with the passwordinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nit maintains all functionality of the underlying passwordinput, including the visibility toggle.\n\nresources\n\nfor detailed guid","titleNoSpaces":"passwordinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthepasswordinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldpasswordinputpasswordinputfield","titleWords":["password","input","field"],"descriptionWords":["this","pattern","component","integrates","the","passwordinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","passwordinput","passwordinputfield"]}},{"id":"Patterns-PublicPageLayout","title":"Public page layout","exportName":"PublicPageLayout","description":"A pre-built, centered layout for public-facing pages (login, registration, password reset) with slots for brand logo, welcome heading, main content, and legal footer.","tags":["component","pattern","pages","Flex","Stack","Heading","Text"],"route":"patterns/pages/public-page-layout","menu":["Patterns","Pages","Public page layout"],"content":"Overview\n\nPublicPageLayout is a pattern that composes a centered, full-viewport-height\n layout for public-facing pages. It replaces Merchant Center Application Kit's\n public-page-layout component.\n\nThe layout vertically stacks: an optional brand logo, an optional welcome\nheading, the main content area, and an optional legal footer — all\nhorizontally centered with a constrained max-width.\n\nAnatomy\n\n- A <main> landmark with an accessible label (default: \"Public page\")\n- Optional logo area, centere","_lower":{"title":"public page layout","description":"a pre-built, centered layout for public-facing pages (login, registration, password reset) with slots for brand logo, welcome heading, main content, and legal footer.","tags":"component pattern pages flex stack heading text","content":"overview\n\npublicpagelayout is a pattern that composes a centered, full-viewport-height\n layout for public-facing pages. it replaces merchant center application kit's\n public-page-layout component.\n\nthe layout vertically stacks: an optional brand logo, an optional welcome\nheading, the main content area, and an optional legal footer — all\nhorizontally centered with a constrained max-width.\n\nanatomy\n\n- a <main> landmark with an accessible label (default: \"public page\")\n- optional logo area, centere","combined":"public page layout a pre-built, centered layout for public-facing pages (login, registration, password reset) with slots for brand logo, welcome heading, main content, and legal footer. component pattern pages flex stack heading text overview\n\npublicpagelayout is a pattern that composes a centered, full-viewport-height\n layout for public-facing pages. it replaces merchant center application kit's\n public-page-layout component.\n\nthe layout vertically stacks: an optional brand logo, an optional welcome\nheading, the main content area, and an optional legal footer — all\nhorizontally centered with a constrained max-width.\n\nanatomy\n\n- a <main> landmark with an accessible label (default: \"public page\")\n- optional logo area, centere","titleNoSpaces":"publicpagelayout","descriptionNoSpaces":"apre-built,centeredlayoutforpublic-facingpages(login,registration,passwordreset)withslotsforbrandlogo,welcomeheading,maincontent,andlegalfooter.","tagsNoSpaces":"componentpatternpagesflexstackheadingtext","titleWords":["public","page","layout"],"descriptionWords":["a","pre-built,","centered","layout","for","public-facing","pages","(login,","registration,","password","reset)","with","slots","for","brand","logo,","welcome","heading,","main","content,","and","legal","footer."],"tagsWords":["component","pattern","pages","flex","stack","heading","text"]}},{"id":"Patterns-SearchInputField","title":"Search input field","exportName":"SearchInputField","description":"This pattern component integrates the SearchInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","SearchInput","SearchInputField"],"route":"patterns/fields/search-input-field","menu":["Patterns","Fields","Search input field"],"content":"Overview\n\nSearchInputField is a pattern component that combines the FormField wrapper with the SearchInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nThe component features a built-in search icon, a clear button that appears when text is entered, keyboard shortcuts (Escape to cle","_lower":{"title":"search input field","description":"this pattern component integrates the searchinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field searchinput searchinputfield","content":"overview\n\nsearchinputfield is a pattern component that combines the formfield wrapper with the searchinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component features a built-in search icon, a clear button that appears when text is entered, keyboard shortcuts (escape to cle","combined":"search input field this pattern component integrates the searchinput within a formfield using a simple, consistent, and opinionated api. component pattern field searchinput searchinputfield overview\n\nsearchinputfield is a pattern component that combines the formfield wrapper with the searchinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nthe component features a built-in search icon, a clear button that appears when text is entered, keyboard shortcuts (escape to cle","titleNoSpaces":"searchinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthesearchinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldsearchinputsearchinputfield","titleWords":["search","input","field"],"descriptionWords":["this","pattern","component","integrates","the","searchinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","searchinput","searchinputfield"]}},{"id":"Patterns-TextInputField","title":"Text input field","exportName":"TextInputField","description":"This pattern component integrates the TextInput within a FormField using a simple, consistent, and opinionated API.","tags":["component","pattern","field","TextInput","TextInputField"],"route":"patterns/fields/text-input-field","menu":["Patterns","Fields","Text input field"],"content":"Overview\n\nTextInputField is a pattern component that combines the FormField wrapper with the TextInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nResources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- TextInpu","_lower":{"title":"text input field","description":"this pattern component integrates the textinput within a formfield using a simple, consistent, and opinionated api.","tags":"component pattern field textinput textinputfield","content":"overview\n\ntextinputfield is a pattern component that combines the formfield wrapper with the textinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- textinpu","combined":"text input field this pattern component integrates the textinput within a formfield using a simple, consistent, and opinionated api. component pattern field textinput textinputfield overview\n\ntextinputfield is a pattern component that combines the formfield wrapper with the textinput component. this integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated api.\n\nresources\n\nfor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- textinpu","titleNoSpaces":"textinputfield","descriptionNoSpaces":"thispatterncomponentintegratesthetextinputwithinaformfieldusingasimple,consistent,andopinionatedapi.","tagsNoSpaces":"componentpatternfieldtextinputtextinputfield","titleWords":["text","input","field"],"descriptionWords":["this","pattern","component","integrates","the","textinput","within","a","formfield","using","a","simple,","consistent,","and","opinionated","api."],"tagsWords":["component","pattern","field","textinput","textinputfield"]}},{"id":"Spacing","title":"Spacing","description":"Spacing tokens are used to define the space between elements.","tags":["space","spacing"],"route":"home/design-tokens/spacing","menu":["Home","Design Tokens","Spacing"],"content":"Spacing Tokens\n\nSpacing tokens are used to define the space between elements. They are used to\ncreate consistent spacing between elements and to ensure that the layout is\nvisually balanced.\n\n> [!NOTE]  \n> Every token has a negative equivalent, in case you need to apply a negative\n> margin etc. Access the negative version by prependind the token name with a\n> dash. e.g. -100, -400, -1000, etc.\n\n<br />\n\n<SpacingTokenDemo />\n\n<br />\n\n> [!TIP]  \n> To quickly calculate the token value in px, take the","_lower":{"title":"spacing","description":"spacing tokens are used to define the space between elements.","tags":"space spacing","content":"spacing tokens\n\nspacing tokens are used to define the space between elements. they are used to\ncreate consistent spacing between elements and to ensure that the layout is\nvisually balanced.\n\n> [!note]  \n> every token has a negative equivalent, in case you need to apply a negative\n> margin etc. access the negative version by prependind the token name with a\n> dash. e.g. -100, -400, -1000, etc.\n\n<br />\n\n<spacingtokendemo />\n\n<br />\n\n> [!tip]  \n> to quickly calculate the token value in px, take the","combined":"spacing spacing tokens are used to define the space between elements. space spacing spacing tokens\n\nspacing tokens are used to define the space between elements. they are used to\ncreate consistent spacing between elements and to ensure that the layout is\nvisually balanced.\n\n> [!note]  \n> every token has a negative equivalent, in case you need to apply a negative\n> margin etc. access the negative version by prependind the token name with a\n> dash. e.g. -100, -400, -1000, etc.\n\n<br />\n\n<spacingtokendemo />\n\n<br />\n\n> [!tip]  \n> to quickly calculate the token value in px, take the","titleNoSpaces":"spacing","descriptionNoSpaces":"spacingtokensareusedtodefinethespacebetweenelements.","tagsNoSpaces":"spacespacing","titleWords":["spacing"],"descriptionWords":["spacing","tokens","are","used","to","define","the","space","between","elements."],"tagsWords":["space","spacing"]}},{"id":"Style Props-Background","title":"Background","description":"JSX style props for styling background colors, gradients, and images.","tags":["document"],"route":"home/style-props/background","menu":["Home","Style Props","Background"],"content":"Background\n\nJSX style props for styling background colors, gradients, and images.\n\nBackground Attachment\n\nUse bgAttachment to control the attachment of a background image.\n\n``jsx\n<Box bgAttachment=\"fixed\" bgImage=\"url(...)\" />\n`\n\n| Prop                                   | CSS Property            | Token Category |\n| -------------------------------------- | ----------------------- | -------------- |\n| bgAttachment, backgroundAttachment | background-attachment | -              |\n\nBackground Blend ","_lower":{"title":"background","description":"jsx style props for styling background colors, gradients, and images.","tags":"document","content":"background\n\njsx style props for styling background colors, gradients, and images.\n\nbackground attachment\n\nuse bgattachment to control the attachment of a background image.\n\n``jsx\n<box bgattachment=\"fixed\" bgimage=\"url(...)\" />\n`\n\n| prop                                   | css property            | token category |\n| -------------------------------------- | ----------------------- | -------------- |\n| bgattachment, backgroundattachment | background-attachment | -              |\n\nbackground blend ","combined":"background jsx style props for styling background colors, gradients, and images. document background\n\njsx style props for styling background colors, gradients, and images.\n\nbackground attachment\n\nuse bgattachment to control the attachment of a background image.\n\n``jsx\n<box bgattachment=\"fixed\" bgimage=\"url(...)\" />\n`\n\n| prop                                   | css property            | token category |\n| -------------------------------------- | ----------------------- | -------------- |\n| bgattachment, backgroundattachment | background-attachment | -              |\n\nbackground blend ","titleNoSpaces":"background","descriptionNoSpaces":"jsxstylepropsforstylingbackgroundcolors,gradients,andimages.","tagsNoSpaces":"document","titleWords":["background"],"descriptionWords":["jsx","style","props","for","styling","background","colors,","gradients,","and","images."],"tagsWords":["document"]}},{"id":"Style Props-Border","title":"Border","description":"JSX style props for styling border and border radius.","tags":["document"],"route":"home/style-props/border","menu":["Home","Style Props","Border"],"content":"Border\n\nJSX style props for styling border and border radius.\n\nBorder Radius\n\nAll sides\n\nUse the rounded or borderRadius props to apply border radius on all sides of\nan element.\n\n``jsx\n<Box borderRadius=\"400\" />\n<Box rounded=\"400\" /> // shorthand\n`\n\n| Prop                      | CSS Property    | Token Category |\n| ------------------------- | --------------- | -------------- |\n| rounded, borderRadius | border-radius | radii        |\n\nSpecific sides\n\nUse the rounded{Left,Right,Top,Bottom} or\nbord","_lower":{"title":"border","description":"jsx style props for styling border and border radius.","tags":"document","content":"border\n\njsx style props for styling border and border radius.\n\nborder radius\n\nall sides\n\nuse the rounded or borderradius props to apply border radius on all sides of\nan element.\n\n``jsx\n<box borderradius=\"400\" />\n<box rounded=\"400\" /> // shorthand\n`\n\n| prop                      | css property    | token category |\n| ------------------------- | --------------- | -------------- |\n| rounded, borderradius | border-radius | radii        |\n\nspecific sides\n\nuse the rounded{left,right,top,bottom} or\nbord","combined":"border jsx style props for styling border and border radius. document border\n\njsx style props for styling border and border radius.\n\nborder radius\n\nall sides\n\nuse the rounded or borderradius props to apply border radius on all sides of\nan element.\n\n``jsx\n<box borderradius=\"400\" />\n<box rounded=\"400\" /> // shorthand\n`\n\n| prop                      | css property    | token category |\n| ------------------------- | --------------- | -------------- |\n| rounded, borderradius | border-radius | radii        |\n\nspecific sides\n\nuse the rounded{left,right,top,bottom} or\nbord","titleNoSpaces":"border","descriptionNoSpaces":"jsxstylepropsforstylingborderandborderradius.","tagsNoSpaces":"document","titleWords":["border"],"descriptionWords":["jsx","style","props","for","styling","border","and","border","radius."],"tagsWords":["document"]}},{"id":"Style Props-Display","title":"Display","description":"Style props for styling display of an element.","tags":["document"],"route":"home/style-props/display","menu":["Home","Style Props","Display"],"content":"Display\n\nStyle props for styling display of an element.\n\nDisplay Property\n\n``jsx\n<Box display=\"flex\" />\n\n// responsive\n<Box display={{ base: \"none\", md: \"block\" }} />\n`\n\n| Prop      | CSS Property | Token Category |\n| --------- | ------------ | -------------- |\n| display | display    | -              |\n\nHiding Elements\n\nHide From\n\nUse the hideFrom prop to hide an element from a specific breakpoint.\n\n`jsx\n<Box display=\"flex\" hideFrom=\"md\" />\n`\n\n| Prop       | CSS Property | Token Category |\n| ---","_lower":{"title":"display","description":"style props for styling display of an element.","tags":"document","content":"display\n\nstyle props for styling display of an element.\n\ndisplay property\n\n``jsx\n<box display=\"flex\" />\n\n// responsive\n<box display={{ base: \"none\", md: \"block\" }} />\n`\n\n| prop      | css property | token category |\n| --------- | ------------ | -------------- |\n| display | display    | -              |\n\nhiding elements\n\nhide from\n\nuse the hidefrom prop to hide an element from a specific breakpoint.\n\n`jsx\n<box display=\"flex\" hidefrom=\"md\" />\n`\n\n| prop       | css property | token category |\n| ---","combined":"display style props for styling display of an element. document display\n\nstyle props for styling display of an element.\n\ndisplay property\n\n``jsx\n<box display=\"flex\" />\n\n// responsive\n<box display={{ base: \"none\", md: \"block\" }} />\n`\n\n| prop      | css property | token category |\n| --------- | ------------ | -------------- |\n| display | display    | -              |\n\nhiding elements\n\nhide from\n\nuse the hidefrom prop to hide an element from a specific breakpoint.\n\n`jsx\n<box display=\"flex\" hidefrom=\"md\" />\n`\n\n| prop       | css property | token category |\n| ---","titleNoSpaces":"display","descriptionNoSpaces":"stylepropsforstylingdisplayofanelement.","tagsNoSpaces":"document","titleWords":["display"],"descriptionWords":["style","props","for","styling","display","of","an","element."],"tagsWords":["document"]}},{"id":"Style Props-Effects","title":"Effects","description":"JSX style props for styling box shadows, opacity, and more","tags":["document"],"route":"home/style-props/effects","menu":["Home","Style Props","Effects"],"content":"Effects\n\nJSX style props for styling box shadows, opacity, and more\n\nBox Shadow\n\nUse the shadow or boxShadow prop to apply a box shadow to an element.\n\n``jsx\n// hardcoded values\n<Box shadow=\"12px 12px 2px 1px rgba(0, 0, 255, .2)\" />\n\n// token values\n<Box shadow=\"lg\" />\n`\n\n| Prop                   | CSS Property     | Token Category |\n| ---------------------- | ---------------- | -------------- |\n| shadows, boxShadow | box-shadow     | shadows      |\n| shadowColor          | --shadow-color | colo","_lower":{"title":"effects","description":"jsx style props for styling box shadows, opacity, and more","tags":"document","content":"effects\n\njsx style props for styling box shadows, opacity, and more\n\nbox shadow\n\nuse the shadow or boxshadow prop to apply a box shadow to an element.\n\n``jsx\n// hardcoded values\n<box shadow=\"12px 12px 2px 1px rgba(0, 0, 255, .2)\" />\n\n// token values\n<box shadow=\"lg\" />\n`\n\n| prop                   | css property     | token category |\n| ---------------------- | ---------------- | -------------- |\n| shadows, boxshadow | box-shadow     | shadows      |\n| shadowcolor          | --shadow-color | colo","combined":"effects jsx style props for styling box shadows, opacity, and more document effects\n\njsx style props for styling box shadows, opacity, and more\n\nbox shadow\n\nuse the shadow or boxshadow prop to apply a box shadow to an element.\n\n``jsx\n// hardcoded values\n<box shadow=\"12px 12px 2px 1px rgba(0, 0, 255, .2)\" />\n\n// token values\n<box shadow=\"lg\" />\n`\n\n| prop                   | css property     | token category |\n| ---------------------- | ---------------- | -------------- |\n| shadows, boxshadow | box-shadow     | shadows      |\n| shadowcolor          | --shadow-color | colo","titleNoSpaces":"effects","descriptionNoSpaces":"jsxstylepropsforstylingboxshadows,opacity,andmore","tagsNoSpaces":"document","titleWords":["effects"],"descriptionWords":["jsx","style","props","for","styling","box","shadows,","opacity,","and","more"],"tagsWords":["document"]}},{"id":"Style Props-Filters","title":"Filters","description":"JSX style props for applying various filters to elements.","tags":["document"],"route":"home/style-props/filters","menu":["Home","Style Props","Filters"],"content":"Filters\n\nJSX style props for applying various filters to elements.\n\nFilter\n\nUse the filter prop to apply visual effects like blur or color shift to an\nelement.\n\n``jsx\n<Box filter=\"blur(5px)\" />\n<Box filter=\"grayscale(80%)\" />\n`\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| filter | filter     | -              |\n\nBlur\n\nUse the blur prop to apply a blur effect to an element. The requirement for\nthis prop is to set the filter prop to auto.\n\n`jsx\n// har","_lower":{"title":"filters","description":"jsx style props for applying various filters to elements.","tags":"document","content":"filters\n\njsx style props for applying various filters to elements.\n\nfilter\n\nuse the filter prop to apply visual effects like blur or color shift to an\nelement.\n\n``jsx\n<box filter=\"blur(5px)\" />\n<box filter=\"grayscale(80%)\" />\n`\n\n| prop     | css property | token category |\n| -------- | ------------ | -------------- |\n| filter | filter     | -              |\n\nblur\n\nuse the blur prop to apply a blur effect to an element. the requirement for\nthis prop is to set the filter prop to auto.\n\n`jsx\n// har","combined":"filters jsx style props for applying various filters to elements. document filters\n\njsx style props for applying various filters to elements.\n\nfilter\n\nuse the filter prop to apply visual effects like blur or color shift to an\nelement.\n\n``jsx\n<box filter=\"blur(5px)\" />\n<box filter=\"grayscale(80%)\" />\n`\n\n| prop     | css property | token category |\n| -------- | ------------ | -------------- |\n| filter | filter     | -              |\n\nblur\n\nuse the blur prop to apply a blur effect to an element. the requirement for\nthis prop is to set the filter prop to auto.\n\n`jsx\n// har","titleNoSpaces":"filters","descriptionNoSpaces":"jsxstylepropsforapplyingvariousfilterstoelements.","tagsNoSpaces":"document","titleWords":["filters"],"descriptionWords":["jsx","style","props","for","applying","various","filters","to","elements."],"tagsWords":["document"]}},{"id":"Style Props-Flex and Grid","title":"Flex and Grid","description":"JSX style props to control flex and grid layouts","tags":["document"],"route":"home/style-props/flex-and-grid","menu":["Home","Style Props","Flex and Grid"],"content":"Flex and Grid\n\nJSX style props to control flex and grid layouts\n\nFlex Basis\n\nUse the flexBasis prop to set the initial main size of a flex item.\n\n``jsx\n<Flex>\n  <Box flexBasis=\"25%\" />\n  <Box flexBasis=\"25%\" />\n  <Box flexBasis=\"50%\" />\n</Flex>\n`\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| flexBasis | flex-basis | -              |\n\nFlex Direction\n\nUse the flexDir or flexDirection prop to set the direction of the main axis\nin a flex container","_lower":{"title":"flex and grid","description":"jsx style props to control flex and grid layouts","tags":"document","content":"flex and grid\n\njsx style props to control flex and grid layouts\n\nflex basis\n\nuse the flexbasis prop to set the initial main size of a flex item.\n\n``jsx\n<flex>\n  <box flexbasis=\"25%\" />\n  <box flexbasis=\"25%\" />\n  <box flexbasis=\"50%\" />\n</flex>\n`\n\n| prop        | css property | token category |\n| ----------- | ------------ | -------------- |\n| flexbasis | flex-basis | -              |\n\nflex direction\n\nuse the flexdir or flexdirection prop to set the direction of the main axis\nin a flex container","combined":"flex and grid jsx style props to control flex and grid layouts document flex and grid\n\njsx style props to control flex and grid layouts\n\nflex basis\n\nuse the flexbasis prop to set the initial main size of a flex item.\n\n``jsx\n<flex>\n  <box flexbasis=\"25%\" />\n  <box flexbasis=\"25%\" />\n  <box flexbasis=\"50%\" />\n</flex>\n`\n\n| prop        | css property | token category |\n| ----------- | ------------ | -------------- |\n| flexbasis | flex-basis | -              |\n\nflex direction\n\nuse the flexdir or flexdirection prop to set the direction of the main axis\nin a flex container","titleNoSpaces":"flexandgrid","descriptionNoSpaces":"jsxstylepropstocontrolflexandgridlayouts","tagsNoSpaces":"document","titleWords":["flex","and","grid"],"descriptionWords":["jsx","style","props","to","control","flex","and","grid","layouts"],"tagsWords":["document"]}},{"id":"Style Props-Interactivity","title":"Interactivity","description":"JSX style props to enhance interactivity on an element","tags":["document"],"route":"home/style-props/interactivity","menu":["Home","Style Props","Interactivity"],"content":"Interactivity\n\nJSX style props to enhance interactivity on an element\n\nAccent Color\n\nUse the accentColor prop to set the accent color for browser generated\nuser-interface controls.\n\n``jsx\n// hardcoded\n<label>\n  <chakra.input type=\"checkbox\" accentColor=\"#3b82f6\" />\n</label>\n\n// token value\n<label>\n  <chakra.input type=\"checkbox\" accentColor=\"blue.500\" />\n</label>\n`\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| accentColor | accent-colo","_lower":{"title":"interactivity","description":"jsx style props to enhance interactivity on an element","tags":"document","content":"interactivity\n\njsx style props to enhance interactivity on an element\n\naccent color\n\nuse the accentcolor prop to set the accent color for browser generated\nuser-interface controls.\n\n``jsx\n// hardcoded\n<label>\n  <chakra.input type=\"checkbox\" accentcolor=\"#3b82f6\" />\n</label>\n\n// token value\n<label>\n  <chakra.input type=\"checkbox\" accentcolor=\"blue.500\" />\n</label>\n`\n\n| prop          | css property   | token category |\n| ------------- | -------------- | -------------- |\n| accentcolor | accent-colo","combined":"interactivity jsx style props to enhance interactivity on an element document interactivity\n\njsx style props to enhance interactivity on an element\n\naccent color\n\nuse the accentcolor prop to set the accent color for browser generated\nuser-interface controls.\n\n``jsx\n// hardcoded\n<label>\n  <chakra.input type=\"checkbox\" accentcolor=\"#3b82f6\" />\n</label>\n\n// token value\n<label>\n  <chakra.input type=\"checkbox\" accentcolor=\"blue.500\" />\n</label>\n`\n\n| prop          | css property   | token category |\n| ------------- | -------------- | -------------- |\n| accentcolor | accent-colo","titleNoSpaces":"interactivity","descriptionNoSpaces":"jsxstylepropstoenhanceinteractivityonanelement","tagsNoSpaces":"document","titleWords":["interactivity"],"descriptionWords":["jsx","style","props","to","enhance","interactivity","on","an","element"],"tagsWords":["document"]}},{"id":"Style Props-Layout","title":"Layout","description":"JSX style props to control the width, height, and spacing of elements","tags":["document"],"route":"home/style-props/layout","menu":["Home","Style Props","Layout"],"content":"Layout\n\nJSX style props to control the width, height, and spacing of elements\n\nAspect Ratio\n\nUse the aspectRatio prop to set the desired aspect ratio of an element.\n\n``jsx\n// raw value\n<Box aspectRatio=\"1.2\" />\n\n// token\n<Box aspectRatio=\"square\" />\n`\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| aspectRatio | aspect-ratio | aspectRatios |\n\nBreak\n\nBreak After\n\nUse the breakAfter prop to set how page, column, or region breaks should\nbeh","_lower":{"title":"layout","description":"jsx style props to control the width, height, and spacing of elements","tags":"document","content":"layout\n\njsx style props to control the width, height, and spacing of elements\n\naspect ratio\n\nuse the aspectratio prop to set the desired aspect ratio of an element.\n\n``jsx\n// raw value\n<box aspectratio=\"1.2\" />\n\n// token\n<box aspectratio=\"square\" />\n`\n\n| prop          | css property   | token category |\n| ------------- | -------------- | -------------- |\n| aspectratio | aspect-ratio | aspectratios |\n\nbreak\n\nbreak after\n\nuse the breakafter prop to set how page, column, or region breaks should\nbeh","combined":"layout jsx style props to control the width, height, and spacing of elements document layout\n\njsx style props to control the width, height, and spacing of elements\n\naspect ratio\n\nuse the aspectratio prop to set the desired aspect ratio of an element.\n\n``jsx\n// raw value\n<box aspectratio=\"1.2\" />\n\n// token\n<box aspectratio=\"square\" />\n`\n\n| prop          | css property   | token category |\n| ------------- | -------------- | -------------- |\n| aspectratio | aspect-ratio | aspectratios |\n\nbreak\n\nbreak after\n\nuse the breakafter prop to set how page, column, or region breaks should\nbeh","titleNoSpaces":"layout","descriptionNoSpaces":"jsxstylepropstocontrolthewidth,height,andspacingofelements","tagsNoSpaces":"document","titleWords":["layout"],"descriptionWords":["jsx","style","props","to","control","the","width,","height,","and","spacing","of","elements"],"tagsWords":["document"]}},{"id":"Style Props-List","title":"List","description":"JSX style props for customizing list styles.","tags":["document"],"route":"home/style-props/list","menu":["Home","Style Props","List"],"content":"List\n\nJSX style props for customizing list styles.\n\nList Style Type\n\nUse the listStyleType property to set the type of the list marker.\n\n``jsx\n<Box as=\"ul\" listStyleType=\"circle\">\n  <li>Item 1</li>\n  <li>Item 2</li>\n  <li>Item 3</li>\n</Box>\n`\n\n| Prop            | CSS Property      | Token Category |\n| --------------- | ----------------- | -------------- |\n| listStyleType | list-style-type | -              |\n\nList Style Position\n\nUse the listStylePosition property to set the position of the list ","_lower":{"title":"list","description":"jsx style props for customizing list styles.","tags":"document","content":"list\n\njsx style props for customizing list styles.\n\nlist style type\n\nuse the liststyletype property to set the type of the list marker.\n\n``jsx\n<box as=\"ul\" liststyletype=\"circle\">\n  <li>item 1</li>\n  <li>item 2</li>\n  <li>item 3</li>\n</box>\n`\n\n| prop            | css property      | token category |\n| --------------- | ----------------- | -------------- |\n| liststyletype | list-style-type | -              |\n\nlist style position\n\nuse the liststyleposition property to set the position of the list ","combined":"list jsx style props for customizing list styles. document list\n\njsx style props for customizing list styles.\n\nlist style type\n\nuse the liststyletype property to set the type of the list marker.\n\n``jsx\n<box as=\"ul\" liststyletype=\"circle\">\n  <li>item 1</li>\n  <li>item 2</li>\n  <li>item 3</li>\n</box>\n`\n\n| prop            | css property      | token category |\n| --------------- | ----------------- | -------------- |\n| liststyletype | list-style-type | -              |\n\nlist style position\n\nuse the liststyleposition property to set the position of the list ","titleNoSpaces":"list","descriptionNoSpaces":"jsxstylepropsforcustomizingliststyles.","tagsNoSpaces":"document","titleWords":["list"],"descriptionWords":["jsx","style","props","for","customizing","list","styles."],"tagsWords":["document"]}},{"id":"Style Props-Sizing","title":"Sizing","description":"JSX style props for sizing an element","tags":["document"],"route":"home/style-props/sizing","menu":["Home","Style Props","Sizing"],"content":"Sizing\n\nJSX style props for sizing an element\n\nWidth\n\nUse the width or w property to set the width of an element.\n\n``jsx\n// hardcoded values\n<Box width=\"64px\" />\n<Box w=\"4rem\" />\n\n// token values\n<Box width=\"5\" />\n<Box w=\"5\" />\n`\n\nFractional width\n\nUse can set fractional widths using the width or w property.\n\nValues can be within the following ranges:\n\n- Thirds: 1/3 to 2/3\n- Fourths: 1/4 to 3/4\n- Fifths: 1/5 to 4/5\n- Sixths: 1/6 to 5/6\n- Twelfths: 1/12 to 11/12\n\n`jsx\n// half width\n<Flex>\n  <Box ","_lower":{"title":"sizing","description":"jsx style props for sizing an element","tags":"document","content":"sizing\n\njsx style props for sizing an element\n\nwidth\n\nuse the width or w property to set the width of an element.\n\n``jsx\n// hardcoded values\n<box width=\"64px\" />\n<box w=\"4rem\" />\n\n// token values\n<box width=\"5\" />\n<box w=\"5\" />\n`\n\nfractional width\n\nuse can set fractional widths using the width or w property.\n\nvalues can be within the following ranges:\n\n- thirds: 1/3 to 2/3\n- fourths: 1/4 to 3/4\n- fifths: 1/5 to 4/5\n- sixths: 1/6 to 5/6\n- twelfths: 1/12 to 11/12\n\n`jsx\n// half width\n<flex>\n  <box ","combined":"sizing jsx style props for sizing an element document sizing\n\njsx style props for sizing an element\n\nwidth\n\nuse the width or w property to set the width of an element.\n\n``jsx\n// hardcoded values\n<box width=\"64px\" />\n<box w=\"4rem\" />\n\n// token values\n<box width=\"5\" />\n<box w=\"5\" />\n`\n\nfractional width\n\nuse can set fractional widths using the width or w property.\n\nvalues can be within the following ranges:\n\n- thirds: 1/3 to 2/3\n- fourths: 1/4 to 3/4\n- fifths: 1/5 to 4/5\n- sixths: 1/6 to 5/6\n- twelfths: 1/12 to 11/12\n\n`jsx\n// half width\n<flex>\n  <box ","titleNoSpaces":"sizing","descriptionNoSpaces":"jsxstylepropsforsizinganelement","tagsNoSpaces":"document","titleWords":["sizing"],"descriptionWords":["jsx","style","props","for","sizing","an","element"],"tagsWords":["document"]}},{"id":"Style Props-Spacing","title":"Spacing","description":"JSX style props for controlling the padding and margin of an element.","tags":["document"],"route":"home/style-props/spacing","menu":["Home","Style Props","Spacing"],"content":"Spacing\n\nJSX style props for controlling the padding and margin of an element.\n\nPadding\n\nAll sides\n\nUse the padding prop to apply padding on all sides of an element\n\n``jsx\n// raw value\n<Box padding=\"40px\" />\n<Box p=\"40px\" /> // shorthand\n\n// token value\n<Box padding=\"4\" />\n<Box p=\"4\" /> // shorthand\n`\n\n| Prop          | CSS Property | Token Category |\n| ------------- | ------------ | -------------- |\n| p,padding | padding    | spacing      |\n\nSpecific side\n\nUse the padding{Left,Right,Top,Bottom}","_lower":{"title":"spacing","description":"jsx style props for controlling the padding and margin of an element.","tags":"document","content":"spacing\n\njsx style props for controlling the padding and margin of an element.\n\npadding\n\nall sides\n\nuse the padding prop to apply padding on all sides of an element\n\n``jsx\n// raw value\n<box padding=\"40px\" />\n<box p=\"40px\" /> // shorthand\n\n// token value\n<box padding=\"4\" />\n<box p=\"4\" /> // shorthand\n`\n\n| prop          | css property | token category |\n| ------------- | ------------ | -------------- |\n| p,padding | padding    | spacing      |\n\nspecific side\n\nuse the padding{left,right,top,bottom}","combined":"spacing jsx style props for controlling the padding and margin of an element. document spacing\n\njsx style props for controlling the padding and margin of an element.\n\npadding\n\nall sides\n\nuse the padding prop to apply padding on all sides of an element\n\n``jsx\n// raw value\n<box padding=\"40px\" />\n<box p=\"40px\" /> // shorthand\n\n// token value\n<box padding=\"4\" />\n<box p=\"4\" /> // shorthand\n`\n\n| prop          | css property | token category |\n| ------------- | ------------ | -------------- |\n| p,padding | padding    | spacing      |\n\nspecific side\n\nuse the padding{left,right,top,bottom}","titleNoSpaces":"spacing","descriptionNoSpaces":"jsxstylepropsforcontrollingthepaddingandmarginofanelement.","tagsNoSpaces":"document","titleWords":["spacing"],"descriptionWords":["jsx","style","props","for","controlling","the","padding","and","margin","of","an","element."],"tagsWords":["document"]}},{"id":"Style Props-SVG","title":"SVG","description":"JSX style props for SVG elements.","tags":["document"],"route":"home/style-props/svg","menu":["Home","Style Props","SVG"],"content":"SVG\n\nJSX style props for SVG elements.\n\nFill\n\nUse the fill prop to set the fill color of an SVG element.\n\n``jsx\n<chakra.svg fill=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| Prop   | CSS Property | Token Category |\n| ------ | ------------ | -------------- |\n| fill | fill       | colors       |\n\nStroke\n\nUse the stroke prop to set the stroke color of an SVG element.\n\n`jsx\n<chakra.svg stroke=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| Prop     | CSS Property | Token Category |\n| --------","_lower":{"title":"svg","description":"jsx style props for svg elements.","tags":"document","content":"svg\n\njsx style props for svg elements.\n\nfill\n\nuse the fill prop to set the fill color of an svg element.\n\n``jsx\n<chakra.svg fill=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| prop   | css property | token category |\n| ------ | ------------ | -------------- |\n| fill | fill       | colors       |\n\nstroke\n\nuse the stroke prop to set the stroke color of an svg element.\n\n`jsx\n<chakra.svg stroke=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| prop     | css property | token category |\n| --------","combined":"svg jsx style props for svg elements. document svg\n\njsx style props for svg elements.\n\nfill\n\nuse the fill prop to set the fill color of an svg element.\n\n``jsx\n<chakra.svg fill=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| prop   | css property | token category |\n| ------ | ------------ | -------------- |\n| fill | fill       | colors       |\n\nstroke\n\nuse the stroke prop to set the stroke color of an svg element.\n\n`jsx\n<chakra.svg stroke=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n`\n\n| prop     | css property | token category |\n| --------","titleNoSpaces":"svg","descriptionNoSpaces":"jsxstylepropsforsvgelements.","tagsNoSpaces":"document","titleWords":["svg"],"descriptionWords":["jsx","style","props","for","svg","elements."],"tagsWords":["document"]}},{"id":"Style Props-Tables","title":"Tables","description":"JSX style props for styling table elements.","tags":["document"],"route":"home/style-props/tables","menu":["Home","Style Props","Tables"],"content":"Tables\n\nJSX style props for styling table elements.\n\nBorder Spacing\n\nControl the border-spacing property of a table.\n\n``jsx\n<chakra.table borderSpacing=\"2\">\n  <tbody>\n    <tr>\n      <td>Cell 1</td>\n      <td>Cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n`\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| borderSpacing | border-spacing | spacing      |\n\nBorder Spacing X\n\nUse the borderSpacingX prop to set the horizontal border-sp","_lower":{"title":"tables","description":"jsx style props for styling table elements.","tags":"document","content":"tables\n\njsx style props for styling table elements.\n\nborder spacing\n\ncontrol the border-spacing property of a table.\n\n``jsx\n<chakra.table borderspacing=\"2\">\n  <tbody>\n    <tr>\n      <td>cell 1</td>\n      <td>cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n`\n\n| prop            | css property     | token category |\n| --------------- | ---------------- | -------------- |\n| borderspacing | border-spacing | spacing      |\n\nborder spacing x\n\nuse the borderspacingx prop to set the horizontal border-sp","combined":"tables jsx style props for styling table elements. document tables\n\njsx style props for styling table elements.\n\nborder spacing\n\ncontrol the border-spacing property of a table.\n\n``jsx\n<chakra.table borderspacing=\"2\">\n  <tbody>\n    <tr>\n      <td>cell 1</td>\n      <td>cell 2</td>\n    </tr>\n  </tbody>\n</chakra.table>\n`\n\n| prop            | css property     | token category |\n| --------------- | ---------------- | -------------- |\n| borderspacing | border-spacing | spacing      |\n\nborder spacing x\n\nuse the borderspacingx prop to set the horizontal border-sp","titleNoSpaces":"tables","descriptionNoSpaces":"jsxstylepropsforstylingtableelements.","tagsNoSpaces":"document","titleWords":["tables"],"descriptionWords":["jsx","style","props","for","styling","table","elements."],"tagsWords":["document"]}},{"id":"Style Props-Transforms","title":"Transforms","description":"JSX style props for transforming elements.","tags":["document"],"route":"home/style-props/transforms","menu":["Home","Style Props","Transforms"],"content":"Transforms\n\nJSX style props for transforming elements.\n\nScale\n\nUse the scale prop to control the scale of an element.\n\n``jsx\n<Box scale=\"1.2\" />\n`\n\nWhen the scale prop is set to auto, the scaleX and scaleY props are used\nto control the scale of the element.\n\n| Prop    | CSS Property | Token Category |\n| ------- | ------------ | -------------- |\n| scale | scale      | -              |\n\nScale X\n\nUse the scaleX prop to control the scaleX property of an element. This\nrequires the scale prop to be se","_lower":{"title":"transforms","description":"jsx style props for transforming elements.","tags":"document","content":"transforms\n\njsx style props for transforming elements.\n\nscale\n\nuse the scale prop to control the scale of an element.\n\n``jsx\n<box scale=\"1.2\" />\n`\n\nwhen the scale prop is set to auto, the scalex and scaley props are used\nto control the scale of the element.\n\n| prop    | css property | token category |\n| ------- | ------------ | -------------- |\n| scale | scale      | -              |\n\nscale x\n\nuse the scalex prop to control the scalex property of an element. this\nrequires the scale prop to be se","combined":"transforms jsx style props for transforming elements. document transforms\n\njsx style props for transforming elements.\n\nscale\n\nuse the scale prop to control the scale of an element.\n\n``jsx\n<box scale=\"1.2\" />\n`\n\nwhen the scale prop is set to auto, the scalex and scaley props are used\nto control the scale of the element.\n\n| prop    | css property | token category |\n| ------- | ------------ | -------------- |\n| scale | scale      | -              |\n\nscale x\n\nuse the scalex prop to control the scalex property of an element. this\nrequires the scale prop to be se","titleNoSpaces":"transforms","descriptionNoSpaces":"jsxstylepropsfortransformingelements.","tagsNoSpaces":"document","titleWords":["transforms"],"descriptionWords":["jsx","style","props","for","transforming","elements."],"tagsWords":["document"]}},{"id":"Style Props-Transitions","title":"Transitions","description":"JSX style props for controlling an element's transition and animation.","tags":["document"],"route":"home/style-props/transitions","menu":["Home","Style Props","Transitions"],"content":"Transitions\n\nJSX style props for controlling an element's transition and animation.\n\nTransition\n\nUse the transition prop to control the transition of an element.\n\n``jsx\n// hardcoded value\n<Box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"background 0.2s ease-in-out\">\n  Hover me\n</Box>\n\n// shortcut value\n<Box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"backgrounds\">\n  Hover me\n</Box>\n`\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- ","_lower":{"title":"transitions","description":"jsx style props for controlling an element's transition and animation.","tags":"document","content":"transitions\n\njsx style props for controlling an element's transition and animation.\n\ntransition\n\nuse the transition prop to control the transition of an element.\n\n``jsx\n// hardcoded value\n<box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"background 0.2s ease-in-out\">\n  hover me\n</box>\n\n// shortcut value\n<box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"backgrounds\">\n  hover me\n</box>\n`\n\n| prop         | css property | token category |\n| ------------ | ------------ | -------------- ","combined":"transitions jsx style props for controlling an element's transition and animation. document transitions\n\njsx style props for controlling an element's transition and animation.\n\ntransition\n\nuse the transition prop to control the transition of an element.\n\n``jsx\n// hardcoded value\n<box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"background 0.2s ease-in-out\">\n  hover me\n</box>\n\n// shortcut value\n<box bg=\"red.400\" _hover={{ bg: \"red.500\" }} transition=\"backgrounds\">\n  hover me\n</box>\n`\n\n| prop         | css property | token category |\n| ------------ | ------------ | -------------- ","titleNoSpaces":"transitions","descriptionNoSpaces":"jsxstylepropsforcontrollinganelement'stransitionandanimation.","tagsNoSpaces":"document","titleWords":["transitions"],"descriptionWords":["jsx","style","props","for","controlling","an","element's","transition","and","animation."],"tagsWords":["document"]}},{"id":"Style Props-Typography","title":"Typography","description":"JSX style props for styling text","tags":["document"],"route":"home/style-props/typography","menu":["Home","Style Props","Typography"],"content":"Typography\n\nJSX style props for styling text\n\nFont Family\n\nUse the fontFamily prop to set the font family of a text element.\n\n``jsx\n<Text fontFamily=\"mono\">Hello World</Text>\n`\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| fontFamily | font-family | fonts        |\n\nFont Size\n\nUse the fontSize prop to set the font size of a text element.\n\n`jsx\n// hardcoded values\n<Text fontSize=\"12px\">Hello World</Text>\n<Text fontSize=\"10rem\">Hello World</T","_lower":{"title":"typography","description":"jsx style props for styling text","tags":"document","content":"typography\n\njsx style props for styling text\n\nfont family\n\nuse the fontfamily prop to set the font family of a text element.\n\n``jsx\n<text fontfamily=\"mono\">hello world</text>\n`\n\n| prop         | css property  | token category |\n| ------------ | ------------- | -------------- |\n| fontfamily | font-family | fonts        |\n\nfont size\n\nuse the fontsize prop to set the font size of a text element.\n\n`jsx\n// hardcoded values\n<text fontsize=\"12px\">hello world</text>\n<text fontsize=\"10rem\">hello world</t","combined":"typography jsx style props for styling text document typography\n\njsx style props for styling text\n\nfont family\n\nuse the fontfamily prop to set the font family of a text element.\n\n``jsx\n<text fontfamily=\"mono\">hello world</text>\n`\n\n| prop         | css property  | token category |\n| ------------ | ------------- | -------------- |\n| fontfamily | font-family | fonts        |\n\nfont size\n\nuse the fontsize prop to set the font size of a text element.\n\n`jsx\n// hardcoded values\n<text fontsize=\"12px\">hello world</text>\n<text fontsize=\"10rem\">hello world</t","titleNoSpaces":"typography","descriptionNoSpaces":"jsxstylepropsforstylingtext","tagsNoSpaces":"document","titleWords":["typography"],"descriptionWords":["jsx","style","props","for","styling","text"],"tagsWords":["document"]}},{"id":"Toc","title":"Toc","description":"Let's get the table of contents automatically generated","tags":["playground","exploring"],"route":"home/playground/toc","menu":["Home","Playground","Toc"],"content":"Toc\n\nThis is the place to try out things.\n\nLevel 2.1\n\nFirst Level 2 Heading\n\nLevel 3.1\n\nFirst Level 3 Heading\n\nLevel 4.1\n\nFirst Level 4 Heading\n\nLevel 4.2\n\nSecond Level 4 Heading\n\nLevel 3.2\n\nSecond Level 3 Heading\n\nLevel 2.2","_lower":{"title":"toc","description":"let's get the table of contents automatically generated","tags":"playground exploring","content":"toc\n\nthis is the place to try out things.\n\nlevel 2.1\n\nfirst level 2 heading\n\nlevel 3.1\n\nfirst level 3 heading\n\nlevel 4.1\n\nfirst level 4 heading\n\nlevel 4.2\n\nsecond level 4 heading\n\nlevel 3.2\n\nsecond level 3 heading\n\nlevel 2.2","combined":"toc let's get the table of contents automatically generated playground exploring toc\n\nthis is the place to try out things.\n\nlevel 2.1\n\nfirst level 2 heading\n\nlevel 3.1\n\nfirst level 3 heading\n\nlevel 4.1\n\nfirst level 4 heading\n\nlevel 4.2\n\nsecond level 4 heading\n\nlevel 3.2\n\nsecond level 3 heading\n\nlevel 2.2","titleNoSpaces":"toc","descriptionNoSpaces":"let'sgetthetableofcontentsautomaticallygenerated","tagsNoSpaces":"playgroundexploring","titleWords":["toc"],"descriptionWords":["let's","get","the","table","of","contents","automatically","generated"],"tagsWords":["playground","exploring"]}},{"id":"Tokens-Other","title":"Other","description":"Less frequently used design-tokens","tags":["document"],"route":"home/design-tokens/other","menu":["Home","Design Tokens","Other"],"content":"Other\n\nLess frequently used design-tokens\n\n<CategoryOverview />","_lower":{"title":"other","description":"less frequently used design-tokens","tags":"document","content":"other\n\nless frequently used design-tokens\n\n<categoryoverview />","combined":"other less frequently used design-tokens document other\n\nless frequently used design-tokens\n\n<categoryoverview />","titleNoSpaces":"other","descriptionNoSpaces":"lessfrequentlyuseddesign-tokens","tagsNoSpaces":"document","titleWords":["other"],"descriptionWords":["less","frequently","used","design-tokens"],"tagsWords":["document"]}},{"id":"TokensAnimations","title":"Animations","description":"The list of available animation tokens","tags":["animation","transition"],"route":"home/design-tokens/other/animations","menu":["Home","Design Tokens","Other","Animations"],"content":"Animations\n\nThis page provides a list of tokens for applying ready made animations\n(shorthands) or creating custom animations or transitions by combining keyframe\nanimations with durations and easings.\n\nShorthands\n\nThe following list of shorthand tokens can be used as animation property\nvalue, they combine a keyframe animation with duration and easing for a reusable\nanimation definition.\n\n<GenericTokenTableDemo category=\"animations\" demoProperty=\"animation\" />\n\nKeyframe Animations\n\nCSS keyframe ","_lower":{"title":"animations","description":"the list of available animation tokens","tags":"animation transition","content":"animations\n\nthis page provides a list of tokens for applying ready made animations\n(shorthands) or creating custom animations or transitions by combining keyframe\nanimations with durations and easings.\n\nshorthands\n\nthe following list of shorthand tokens can be used as animation property\nvalue, they combine a keyframe animation with duration and easing for a reusable\nanimation definition.\n\n<generictokentabledemo category=\"animations\" demoproperty=\"animation\" />\n\nkeyframe animations\n\ncss keyframe ","combined":"animations the list of available animation tokens animation transition animations\n\nthis page provides a list of tokens for applying ready made animations\n(shorthands) or creating custom animations or transitions by combining keyframe\nanimations with durations and easings.\n\nshorthands\n\nthe following list of shorthand tokens can be used as animation property\nvalue, they combine a keyframe animation with duration and easing for a reusable\nanimation definition.\n\n<generictokentabledemo category=\"animations\" demoproperty=\"animation\" />\n\nkeyframe animations\n\ncss keyframe ","titleNoSpaces":"animations","descriptionNoSpaces":"thelistofavailableanimationtokens","tagsNoSpaces":"animationtransition","titleWords":["animations"],"descriptionWords":["the","list","of","available","animation","tokens"],"tagsWords":["animation","transition"]}},{"id":"TokensAspectRatios","title":"Aspect Ratios","description":"The list of available aspect ratio tokens","tags":["aspect ratio","ratios"],"route":"home/design-tokens/aspect-ratios","menu":["Home","Design Tokens","Aspect Ratios"],"content":"Aspect Ratios\n\nThe list of available aspect ratio tokens:\n\n<GenericTokenTableDemo category=\"aspectRatios\" demoProperty=\"aspectRatio\" />","_lower":{"title":"aspect ratios","description":"the list of available aspect ratio tokens","tags":"aspect ratio ratios","content":"aspect ratios\n\nthe list of available aspect ratio tokens:\n\n<generictokentabledemo category=\"aspectratios\" demoproperty=\"aspectratio\" />","combined":"aspect ratios the list of available aspect ratio tokens aspect ratio ratios aspect ratios\n\nthe list of available aspect ratio tokens:\n\n<generictokentabledemo category=\"aspectratios\" demoproperty=\"aspectratio\" />","titleNoSpaces":"aspectratios","descriptionNoSpaces":"thelistofavailableaspectratiotokens","tagsNoSpaces":"aspectratioratios","titleWords":["aspect","ratios"],"descriptionWords":["the","list","of","available","aspect","ratio","tokens"],"tagsWords":["aspect","ratio","ratios"]}},{"id":"TokensBlurs","title":"Blurs","description":"The list of available blur tokens","tags":["blur"],"route":"home/design-tokens/other/blurs","menu":["Home","Design Tokens","Other","Blurs"],"content":"Blurs\n\nThe list of available blur tokens:\n\n<GenericTokenTableDemo category=\"blurs\" demoProperty=\"blur\" />","_lower":{"title":"blurs","description":"the list of available blur tokens","tags":"blur","content":"blurs\n\nthe list of available blur tokens:\n\n<generictokentabledemo category=\"blurs\" demoproperty=\"blur\" />","combined":"blurs the list of available blur tokens blur blurs\n\nthe list of available blur tokens:\n\n<generictokentabledemo category=\"blurs\" demoproperty=\"blur\" />","titleNoSpaces":"blurs","descriptionNoSpaces":"thelistofavailableblurtokens","tagsNoSpaces":"blur","titleWords":["blurs"],"descriptionWords":["the","list","of","available","blur","tokens"],"tagsWords":["blur"]}},{"id":"TokensBorders","title":"Borders","description":"The list of available border tokens","tags":["border"],"route":"home/design-tokens/borders","menu":["Home","Design Tokens","Borders"],"content":"Borders\n\nThe list of available border tokens:\n\n<GenericTokenTableDemo category=\"borders\" demoProperty=\"border\" />\n\n> [!IMPORTANT]  \n> The design system uses box-sizing: border-box as a default. If you assign an\n> element a width of 100px, the computed border-width value will be\n> included in the 100px, effectively reducing the amount of space available\n> for content.","_lower":{"title":"borders","description":"the list of available border tokens","tags":"border","content":"borders\n\nthe list of available border tokens:\n\n<generictokentabledemo category=\"borders\" demoproperty=\"border\" />\n\n> [!important]  \n> the design system uses box-sizing: border-box as a default. if you assign an\n> element a width of 100px, the computed border-width value will be\n> included in the 100px, effectively reducing the amount of space available\n> for content.","combined":"borders the list of available border tokens border borders\n\nthe list of available border tokens:\n\n<generictokentabledemo category=\"borders\" demoproperty=\"border\" />\n\n> [!important]  \n> the design system uses box-sizing: border-box as a default. if you assign an\n> element a width of 100px, the computed border-width value will be\n> included in the 100px, effectively reducing the amount of space available\n> for content.","titleNoSpaces":"borders","descriptionNoSpaces":"thelistofavailablebordertokens","tagsNoSpaces":"border","titleWords":["borders"],"descriptionWords":["the","list","of","available","border","tokens"],"tagsWords":["border"]}},{"id":"TokensCursors","title":"Cursors","description":"The list of available cursor tokens","tags":["cursor"],"route":"home/design-tokens/other/cursors","menu":["Home","Design Tokens","Other","Cursors"],"content":"Cursors\n\nThe list of available cursors. Hover over the gray box to see the cursor in\naction.\n\n<GenericTokenTableDemo category=\"cursor\" demoProperty=\"cursor\" />","_lower":{"title":"cursors","description":"the list of available cursor tokens","tags":"cursor","content":"cursors\n\nthe list of available cursors. hover over the gray box to see the cursor in\naction.\n\n<generictokentabledemo category=\"cursor\" demoproperty=\"cursor\" />","combined":"cursors the list of available cursor tokens cursor cursors\n\nthe list of available cursors. hover over the gray box to see the cursor in\naction.\n\n<generictokentabledemo category=\"cursor\" demoproperty=\"cursor\" />","titleNoSpaces":"cursors","descriptionNoSpaces":"thelistofavailablecursortokens","tagsNoSpaces":"cursor","titleWords":["cursors"],"descriptionWords":["the","list","of","available","cursor","tokens"],"tagsWords":["cursor"]}},{"id":"TokensRadii","title":"Radii","description":"The list of available radius tokens","tags":["radius","radii","border-radius"],"route":"home/design-tokens/radii","menu":["Home","Design Tokens","Radii"],"content":"Radii\n\nThe list of available radius tokens\n\nTokens\n\n<GenericTokenTableDemo category=\"radii\" demoProperty=\"borderRadius\" />","_lower":{"title":"radii","description":"the list of available radius tokens","tags":"radius radii border-radius","content":"radii\n\nthe list of available radius tokens\n\ntokens\n\n<generictokentabledemo category=\"radii\" demoproperty=\"borderradius\" />","combined":"radii the list of available radius tokens radius radii border-radius radii\n\nthe list of available radius tokens\n\ntokens\n\n<generictokentabledemo category=\"radii\" demoproperty=\"borderradius\" />","titleNoSpaces":"radii","descriptionNoSpaces":"thelistofavailableradiustokens","tagsNoSpaces":"radiusradiiborder-radius","titleWords":["radii"],"descriptionWords":["the","list","of","available","radius","tokens"],"tagsWords":["radius","radii","border-radius"]}},{"id":"TokensShadows","title":"Shadows","description":"The list of available shadow tokens","tags":["shadows"],"route":"home/design-tokens/shadows","menu":["Home","Design Tokens","Shadows"],"content":"Shadows\n\nThe list of available shadow tokens\n\nTokens\n\n<GenericTokenTableDemo category=\"shadows\" demoProperty=\"boxShadow\" />","_lower":{"title":"shadows","description":"the list of available shadow tokens","tags":"shadows","content":"shadows\n\nthe list of available shadow tokens\n\ntokens\n\n<generictokentabledemo category=\"shadows\" demoproperty=\"boxshadow\" />","combined":"shadows the list of available shadow tokens shadows shadows\n\nthe list of available shadow tokens\n\ntokens\n\n<generictokentabledemo category=\"shadows\" demoproperty=\"boxshadow\" />","titleNoSpaces":"shadows","descriptionNoSpaces":"thelistofavailableshadowtokens","tagsNoSpaces":"shadows","titleWords":["shadows"],"descriptionWords":["the","list","of","available","shadow","tokens"],"tagsWords":["shadows"]}},{"id":"TokensSizes","title":"Sizes","description":"The list of available size tokens","tags":["sizes"],"route":"home/design-tokens/sizes","menu":["Home","Design Tokens","Sizes"],"content":"Sizes\n\nDifferent size type tokens are available to suit various design needs, including\nnumerical, proportional, named, breakpoint, and others.\n\nThe list of available size tokens:\n\nNumerical sizes\n\nPrecise, incrementally scaled units for defining fixed dimensions\n\n<SizesTokenDemo group=\"regular\" />\n\nProportional sizes\n\nProportional dimensional values expressed as fractions, suitable for dividing\nelements in layouts.\n\n<SizesTokenDemo group=\"fraction\" />\n\nLarge sizes\n\nSemantic size labels providin","_lower":{"title":"sizes","description":"the list of available size tokens","tags":"sizes","content":"sizes\n\ndifferent size type tokens are available to suit various design needs, including\nnumerical, proportional, named, breakpoint, and others.\n\nthe list of available size tokens:\n\nnumerical sizes\n\nprecise, incrementally scaled units for defining fixed dimensions\n\n<sizestokendemo group=\"regular\" />\n\nproportional sizes\n\nproportional dimensional values expressed as fractions, suitable for dividing\nelements in layouts.\n\n<sizestokendemo group=\"fraction\" />\n\nlarge sizes\n\nsemantic size labels providin","combined":"sizes the list of available size tokens sizes sizes\n\ndifferent size type tokens are available to suit various design needs, including\nnumerical, proportional, named, breakpoint, and others.\n\nthe list of available size tokens:\n\nnumerical sizes\n\nprecise, incrementally scaled units for defining fixed dimensions\n\n<sizestokendemo group=\"regular\" />\n\nproportional sizes\n\nproportional dimensional values expressed as fractions, suitable for dividing\nelements in layouts.\n\n<sizestokendemo group=\"fraction\" />\n\nlarge sizes\n\nsemantic size labels providin","titleNoSpaces":"sizes","descriptionNoSpaces":"thelistofavailablesizetokens","tagsNoSpaces":"sizes","titleWords":["sizes"],"descriptionWords":["the","list","of","available","size","tokens"],"tagsWords":["sizes"]}},{"id":"TokensTypography","title":"Typography","description":"everything typography related","tags":["text","headings","strong","bold","italic","emphasize"],"route":"home/design-tokens/typography","menu":["Home","Design Tokens","Typography"],"content":"Typography\n\nBelow you'll find the raw tokens to change typography styles on a text-element.\n\nText Styles\n\nText styles are collections of multiple typography rules (such as font-size,\nline-height, letter-spacing etc.) that create a specific, reusable style.\n\n> [!NOTE]  \n> I added caption, detail & body from our existing styles, but they are\n> essentially just combinations of font-size & line-height and can be mapped to\n> xs, sm & md. The headline looks can be achieved by using the\n> textStyles on","_lower":{"title":"typography","description":"everything typography related","tags":"text headings strong bold italic emphasize","content":"typography\n\nbelow you'll find the raw tokens to change typography styles on a text-element.\n\ntext styles\n\ntext styles are collections of multiple typography rules (such as font-size,\nline-height, letter-spacing etc.) that create a specific, reusable style.\n\n> [!note]  \n> i added caption, detail & body from our existing styles, but they are\n> essentially just combinations of font-size & line-height and can be mapped to\n> xs, sm & md. the headline looks can be achieved by using the\n> textstyles on","combined":"typography everything typography related text headings strong bold italic emphasize typography\n\nbelow you'll find the raw tokens to change typography styles on a text-element.\n\ntext styles\n\ntext styles are collections of multiple typography rules (such as font-size,\nline-height, letter-spacing etc.) that create a specific, reusable style.\n\n> [!note]  \n> i added caption, detail & body from our existing styles, but they are\n> essentially just combinations of font-size & line-height and can be mapped to\n> xs, sm & md. the headline looks can be achieved by using the\n> textstyles on","titleNoSpaces":"typography","descriptionNoSpaces":"everythingtypographyrelated","tagsNoSpaces":"textheadingsstrongbolditalicemphasize","titleWords":["typography"],"descriptionWords":["everything","typography","related"],"tagsWords":["text","headings","strong","bold","italic","emphasize"]}},{"id":"useCopyToClipboard","title":"useCopyToClipboard","description":"copy text to the clipboard","tags":["clipboard","copy"],"route":"hooks/usecopytoclipboard","menu":["Hooks","useCopyToClipboard"],"content":"useCopyToClipboard\n\nCopy text to a user's clipboard.\n\nUsage\n\n``jsx\nconst Demo = () => {\n  const [text, setText] = React.useState(\"\");\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    <div>\n      <input value={text} onChange={(e) => setText(e.target.value)} />\n      <button type=\"button\" onClick={() => copyToClipboard(text)}>\n        copy text\n      </button>\n      {state.error ? (\n        <p>Unable to copy value: {state.error.message}</p>\n      ) : (\n        state.value &","_lower":{"title":"usecopytoclipboard","description":"copy text to the clipboard","tags":"clipboard copy","content":"usecopytoclipboard\n\ncopy text to a user's clipboard.\n\nusage\n\n``jsx\nconst demo = () => {\n  const [text, settext] = react.usestate(\"\");\n  const [state, copytoclipboard] = usecopytoclipboard();\n\n  return (\n    <div>\n      <input value={text} onchange={(e) => settext(e.target.value)} />\n      <button type=\"button\" onclick={() => copytoclipboard(text)}>\n        copy text\n      </button>\n      {state.error ? (\n        <p>unable to copy value: {state.error.message}</p>\n      ) : (\n        state.value &","combined":"usecopytoclipboard copy text to the clipboard clipboard copy usecopytoclipboard\n\ncopy text to a user's clipboard.\n\nusage\n\n``jsx\nconst demo = () => {\n  const [text, settext] = react.usestate(\"\");\n  const [state, copytoclipboard] = usecopytoclipboard();\n\n  return (\n    <div>\n      <input value={text} onchange={(e) => settext(e.target.value)} />\n      <button type=\"button\" onclick={() => copytoclipboard(text)}>\n        copy text\n      </button>\n      {state.error ? (\n        <p>unable to copy value: {state.error.message}</p>\n      ) : (\n        state.value &","titleNoSpaces":"usecopytoclipboard","descriptionNoSpaces":"copytexttotheclipboard","tagsNoSpaces":"clipboardcopy","titleWords":["usecopytoclipboard"],"descriptionWords":["copy","text","to","the","clipboard"],"tagsWords":["clipboard","copy"]}},{"id":"useDragAndDrop","title":"useDragAndDrop","description":"shared drag-and-drop hook for Nimbus collection components","tags":["drag","drop","reorder","dnd"],"route":"hooks/usedraganddrop","menu":["Hooks","useDragAndDrop"],"content":"useDragAndDrop\n\nA shared hook that wraps React Aria's drag-and-drop system with namespace isolation,\nexternal drop support, outgoing format serialization, and state handler factories.\nReturns { dragAndDropHooks } to pass to any supported React Aria collection component.\n\nGetting started\n\n``tsx\nimport { useDragAndDrop, createArrayHandlers } from \"@commercetools/nimbus\";\n`\n\nBasic reorderable DataTable\n\n`tsx\nimport { DataTable, useDragAndDrop, createArrayHandlers } from \"@commercetools/nimbus\";\n\nco","_lower":{"title":"usedraganddrop","description":"shared drag-and-drop hook for nimbus collection components","tags":"drag drop reorder dnd","content":"usedraganddrop\n\na shared hook that wraps react aria's drag-and-drop system with namespace isolation,\nexternal drop support, outgoing format serialization, and state handler factories.\nreturns { draganddrophooks } to pass to any supported react aria collection component.\n\ngetting started\n\n``tsx\nimport { usedraganddrop, createarrayhandlers } from \"@commercetools/nimbus\";\n`\n\nbasic reorderable datatable\n\n`tsx\nimport { datatable, usedraganddrop, createarrayhandlers } from \"@commercetools/nimbus\";\n\nco","combined":"usedraganddrop shared drag-and-drop hook for nimbus collection components drag drop reorder dnd usedraganddrop\n\na shared hook that wraps react aria's drag-and-drop system with namespace isolation,\nexternal drop support, outgoing format serialization, and state handler factories.\nreturns { draganddrophooks } to pass to any supported react aria collection component.\n\ngetting started\n\n``tsx\nimport { usedraganddrop, createarrayhandlers } from \"@commercetools/nimbus\";\n`\n\nbasic reorderable datatable\n\n`tsx\nimport { datatable, usedraganddrop, createarrayhandlers } from \"@commercetools/nimbus\";\n\nco","titleNoSpaces":"usedraganddrop","descriptionNoSpaces":"shareddrag-and-drophookfornimbuscollectioncomponents","tagsNoSpaces":"dragdropreorderdnd","titleWords":["usedraganddrop"],"descriptionWords":["shared","drag-and-drop","hook","for","nimbus","collection","components"],"tagsWords":["drag","drop","reorder","dnd"]}},{"id":"useHotkeys","title":"useHotkeys","description":"use keyboard shortcuts to do stuff","tags":["keys","shortcut","keyboard"],"route":"hooks/usehotkeys","menu":["Hooks","useHotkeys"],"content":"useHotkeys\n\nThis hook allows you to listen to hotkeys in a declarative way and execute a\ncallback function once the user pressed down the given hotkey.\n\nBasic usage\n\nImport the useHotkeys hook from the package:\n\n``js\nimport { useHotkeys } from \"@commercetools/nimbus\";\n`\n\nSimple Hotkey\n\nThe most basic usage for the hook is to assign a hotkey you want to listen to\nand a callback to get executed once the user hits that key.\n\n`jsx live\nimport { useHotkeys } from \"@commercetools/nimbus\";\n\nconst App =","_lower":{"title":"usehotkeys","description":"use keyboard shortcuts to do stuff","tags":"keys shortcut keyboard","content":"usehotkeys\n\nthis hook allows you to listen to hotkeys in a declarative way and execute a\ncallback function once the user pressed down the given hotkey.\n\nbasic usage\n\nimport the usehotkeys hook from the package:\n\n``js\nimport { usehotkeys } from \"@commercetools/nimbus\";\n`\n\nsimple hotkey\n\nthe most basic usage for the hook is to assign a hotkey you want to listen to\nand a callback to get executed once the user hits that key.\n\n`jsx live\nimport { usehotkeys } from \"@commercetools/nimbus\";\n\nconst app =","combined":"usehotkeys use keyboard shortcuts to do stuff keys shortcut keyboard usehotkeys\n\nthis hook allows you to listen to hotkeys in a declarative way and execute a\ncallback function once the user pressed down the given hotkey.\n\nbasic usage\n\nimport the usehotkeys hook from the package:\n\n``js\nimport { usehotkeys } from \"@commercetools/nimbus\";\n`\n\nsimple hotkey\n\nthe most basic usage for the hook is to assign a hotkey you want to listen to\nand a callback to get executed once the user hits that key.\n\n`jsx live\nimport { usehotkeys } from \"@commercetools/nimbus\";\n\nconst app =","titleNoSpaces":"usehotkeys","descriptionNoSpaces":"usekeyboardshortcutstodostuff","tagsNoSpaces":"keysshortcutkeyboard","titleWords":["usehotkeys"],"descriptionWords":["use","keyboard","shortcuts","to","do","stuff"],"tagsWords":["keys","shortcut","keyboard"]}},{"id":"ZIndex","title":"Z-Indices","description":"The list of available z-index tokens","tags":["z-index","layer","stacking","context"],"route":"home/design-tokens/other/z-indices","menu":["Home","Design Tokens","Other","Z-Indices"],"content":"Z-Indices\n\nThe list of available z-index tokens.\n\n<GenericTokenTableDemo category=\"zIndex\" />","_lower":{"title":"z-indices","description":"the list of available z-index tokens","tags":"z-index layer stacking context","content":"z-indices\n\nthe list of available z-index tokens.\n\n<generictokentabledemo category=\"zindex\" />","combined":"z-indices the list of available z-index tokens z-index layer stacking context z-indices\n\nthe list of available z-index tokens.\n\n<generictokentabledemo category=\"zindex\" />","titleNoSpaces":"z-indices","descriptionNoSpaces":"thelistofavailablez-indextokens","tagsNoSpaces":"z-indexlayerstackingcontext","titleWords":["z-indices"],"descriptionWords":["the","list","of","available","z-index","tokens"],"tagsWords":["z-index","layer","stacking","context"]}}]