index.txt

1:"$Sreact.fragment"
1e:I[491590,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default",1]
:HL["/_next/static/chunks/0tnw~7b.63~al.css","style"]
:HL["/_next/static/chunks/06m9bcip000mn.css","style"]
:HL["/_next/static/chunks/0-mkqzn5q716v.css","style"]
:HL["/_next/static/chunks/0gydkq.yb78d4.css","style"]
0:{"P":null,"c":["",""],"q":"","i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",16],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0tnw~7b.63~al.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/06m9bcip000mn.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/0-mkqzn5q716v.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/0y6df42ymgr.v.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/chunks/0vrcwaok~j0q9.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/chunks/10pen.bi_vs3z.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/chunks/0len.np11rgvj.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/chunks/10fwo3cl093m2.js","async":true,"nonce":"$undefined"}]],"$L2"]}],{"children":[["$","$1","c",{"children":[[["$","h1",null,{"className":"mdx-module__YUQVZa__h1","children":"Get Started with BUI"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Backstage UI is a design system created specifically for Backstage, built with React, TypeScript, and vanilla CSS.\nThis open-source library is hosted in the Backstage monorepo. While it can be used in other projects, Backstage UI\nis designed to deliver a consistent, accessible, and extensible experience tailored to Backstage users."}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Backstage UI is installed by default on every instance of Backstage, so you can start using it right away.\nIf your setup doesn't include it yet, follow the ",["$","a",null,{"href":"/get-started/installation","className":"mdx-module__YUQVZa__a","children":"installation guide"}]," to get started."]}],"\n",["$","h2",null,{"id":"layout-containers","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#layout-containers","className":"mdx-module__YUQVZa__anchorLink","children":["Layout containers",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","a",null,{"href":"/components/box","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Box"}]}],", ",["$","a",null,{"href":"/components/flex","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Flex"}]}],", ",["$","a",null,{"href":"/components/grid","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Grid"}]}],", and ",["$","a",null,{"href":"/components/card","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Card"}]}]," are the foundation of every layout in Backstage UI.\nEach one offers a set of utility props that map directly to our design tokens, so you can build consistent\nlayouts without writing any CSS. When nested, they also act as surfaces and automatically increment the\nbackground depth so visual hierarchy is handled for you."]}],"\n","$L3","\n",["$","h2",null,{"id":"adaptive-components","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#adaptive-components","className":"mdx-module__YUQVZa__anchorLink","children":["Adaptive components","$L4"]}]}],"\n","$L5","\n","$L6","\n","$L7","\n","$L8","\n","$L9","\n","$La","\n","$Lb","\n","$Lc","\n","$Ld","\n","$Le","\n","$Lf","\n","$L10","\n","$L11","\n","$L12","\n","$L13","\n","$L14","\n","$L15","\n","$L16","\n","$L17","\n","$L18"],["$L19","$L1a","$L1b"],"$L1c"]}],{},null,false,null]},null,false,null],"$L1d",false]],"m":"$undefined","G":["$1e",["$L1f","$L20","$L21"]],"S":true,"h":null,"s":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined","b":"5VfxghUy7PdgVY6-oOprh"}
22:I[437543,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js","/_next/static/chunks/14y9hslq7~ov1.js","/_next/static/chunks/13p6wrl03ngu-.js"],"ColorFamily"]
23:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"OutletBoundary"]
24:"$Sreact.suspense"
26:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"ViewportBoundary"]
28:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"MetadataBoundary"]
4:["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]
5:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Components like ",["$","a",null,{"href":"/components/card","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Card"}]}],", ",["$","a",null,{"href":"/components/button","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Button"}]}],", ",["$","a",null,{"href":"/components/text","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Text"}]}],", and others are ",["$","strong",null,{"children":"adaptive components"}],". They\nautomatically adjust their colors, borders, and backgrounds to match the surface they live on. Drop a\n",["$","a",null,{"href":"/components/button","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Button"}]}]," inside a ",["$","a",null,{"href":"/components/card","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Card"}]}]," inside a ",["$","a",null,{"href":"/components/box","className":"mdx-module__YUQVZa__a","children":["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Box"}]}]," and each component styles itself appropriately\nwithout any extra configuration."]}]
7:["$","h2",null,{"id":"the-neutral-scale-background-colors","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#the-neutral-scale-background-colors","className":"mdx-module__YUQVZa__anchorLink","children":["The neutral scale background colors",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
8:["$","$L22",null,{}]
9:["$","h2",null,{"id":"creating-custom-components","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#creating-custom-components","className":"mdx-module__YUQVZa__anchorLink","children":["Creating custom components",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
a:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"As much as possible we would like you to use components directly without creating custom components. If you need to create a custom component, you should use the components provided by Backstage UI."}]
c:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["If you need to build custom components outside of BUI, you can use our ",["$","a",null,{"href":"/tokens","className":"mdx-module__YUQVZa__a","children":"design tokens"}]," as CSS variables to ensure your styles stay consistent with the rest of the system."]}]
e:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["When building custom interactive components, we strongly recommend using ",["$","a",null,{"href":"https://react-spectrum.adobe.com/react-aria/","className":"mdx-module__YUQVZa__a","children":"React Aria"}]," as your foundation. React Aria provides all the necessary accessibility features out of the box — keyboard navigation, focus management, ARIA attributes, and screen reader support — so you can focus on styling and logic without worrying about compliance."]}]
10:["$","h2",null,{"id":"philosophy","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#philosophy","className":"mdx-module__YUQVZa__anchorLink","children":["Philosophy",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
11:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Backstage empowers product teams to build software faster and with greater quality. Its extensibility,\nhowever, required us to rethink how to deliver a consistent and accessible user experience. Our goal is\nto enable plugin creators to design plugins that seamlessly integrate with Backstage's look and feel while\nstill allowing customization to match individual brands."}]
12:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Instead of reinventing the wheel, we chose to focus on layout and styling while leveraging existing headless\ncomponent libraries for functionality. This approach allows us to dedicate our efforts to creating a cohesive\nand flexible theming system."}]
13:["$","h2",null,{"id":"team","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#team","className":"mdx-module__YUQVZa__anchorLink","children":["Team",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
14:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Backstage UI is designed and maintained primarily by Spotify's Backstage team, leveraging Spotify's expertise in\ncrafting high-quality design and technology. Drawing from our experience in building reliable and intuitive\nuser experiences for the music industry, we've created a design system that looks great and works seamlessly."}]
15:["$","h2",null,{"id":"community","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#community","className":"mdx-module__YUQVZa__anchorLink","children":["Community",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
16:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Backstage UI is an open-source project and we welcome contributions from the community. If you are interested in\ncontributing to Backstage UI, please read our ",["$","a",null,{"href":"https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md","className":"mdx-module__YUQVZa__a","children":"contributing guide"}],"\nand our ",["$","a",null,{"href":"https://github.com/backstage/backstage/blob/master/CODE_OF_CONDUCT.md","className":"mdx-module__YUQVZa__a","children":"code of conduct"}],"."]}]
17:["$","h2",null,{"id":"license","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#license","className":"mdx-module__YUQVZa__anchorLink","children":["License",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
18:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Backstage UI is licensed under the Apache 2.0 license. See the ",["$","a",null,{"href":"https://github.com/backstage/backstage/blob/master/LICENSE","className":"mdx-module__YUQVZa__a","children":"LICENSE"}]," file for more details."]}]
19:["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0gydkq.yb78d4.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]
1a:["$","script","script-0",{"src":"/_next/static/chunks/14y9hslq7~ov1.js","async":true,"nonce":"$undefined"}]
1b:["$","script","script-1",{"src":"/_next/static/chunks/13p6wrl03ngu-.js","async":true,"nonce":"$undefined"}]
1c:["$","$L23",null,{"children":["$","$24",null,{"name":"Next.MetadataOutlet","children":"$@25"}]}]
1d:["$","$1","h",{"children":[null,["$","$L26",null,{"children":"$L27"}],["$","div",null,{"hidden":true,"children":["$","$L28",null,{"children":["$","$24",null,{"name":"Next.Metadata","children":"$L29"}]}]}],null]}]
1f:["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0tnw~7b.63~al.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]
20:["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/06m9bcip000mn.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]
21:["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/0-mkqzn5q716v.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]
27:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
2a:I[619210,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Providers"]
2b:I[889424,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Sidebar"]
2c:I[335702,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Toolbar"]
2d:I[672913,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default"]
2e:I[893277,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default"]
2f:I[637718,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"TableOfContents"]
30:I[256054,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"MobileBottomNav"]
31:I[120426,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"CustomTheme"]
2:["$","html",null,{"lang":"en","data-theme-mode":"light","data-theme-name":"backstage","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L2a",null,{"children":[["$","$L2b",null,{}],["$","div",null,{"className":"layout-module__qLTo7q__container","children":["$","div",null,{"className":"layout-module__qLTo7q__contentWrapper","children":[["$","$L2c",null,{"version":"0.14.2"}],["$","div",null,{"className":"layout-module__qLTo7q__content","children":[["$","div",null,{"className":"layout-module__qLTo7q__contentInner","children":["$","$L2d",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L2e",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","aside",null,{"className":"layout-module__qLTo7q__toc","children":["$","$L2f",null,{}]}]]}]]}]}],["$","$L30",null,{}],["$","$L31",null,{}]]}]}]}]
32:I[178805,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js","/_next/static/chunks/14y9hslq7~ov1.js","/_next/static/chunks/13p6wrl03ngu-.js"],"CodeBlockClient"]
33:Tc79,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Flex</span><span style="color:#B392F0;--shiki-dark:#B392F0"> direction</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"column"</span><span style="color:#B392F0;--shiki-dark:#B392F0"> gap</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"4"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#B392F0;--shiki-dark:#B392F0"> bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">    &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#B392F0;--shiki-dark:#B392F0"> variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"secondary"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>Hello World&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#B392F0;--shiki-dark:#B392F0"> bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">    &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#B392F0;--shiki-dark:#B392F0"> variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"secondary"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>Hello World&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Flex</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span></code></pre>3:["$","$L32",null,{"out":"$33","title":"Nested surfaces with automatic styling"}]
34:T75f,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#B392F0;--shiki-dark:#B392F0"> bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Card</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">> {</span><span style="color:#6A737D;--shiki-dark:#6B737C">/* automatically set background to neutral-2 */</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">}</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">    &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#B392F0;--shiki-dark:#B392F0"> variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"secondary"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>Button with background set to neutral-3&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Card</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span></code></pre>6:["$","$L32",null,{"out":"$34","title":"Nested surfaces with automatic styling"}]
35:T43e,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#B392F0;--shiki-dark:#B392F0"> bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Text</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>Hello World&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Text</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span></code></pre>b:["$","$L32",null,{"out":"$35","title":"Creating a custom card using BUI components"}]
36:T613,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#85E89D;--shiki-dark:#FFAB70">div</span><span style="color:#B392F0;--shiki-dark:#B392F0"> style</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{{ backgroundColor</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'var(--bui-bg-solid)'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }}></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#85E89D;--shiki-dark:#FFAB70">div</span><span style="color:#B392F0;--shiki-dark:#B392F0"> style</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{{ color</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'var(--bui-fg-solid)'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }}>Hello World&#x3C;/</span><span style="color:#85E89D;--shiki-dark:#FFAB70">div</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;/</span><span style="color:#85E89D;--shiki-dark:#FFAB70">div</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span></code></pre>d:["$","$L32",null,{"out":"$36","title":"Creating a custom component using BUI tokens"}]
37:T1307,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { ColorPicker</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> ColorArea</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> ColorSlider</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> ColorField } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'react-aria-components'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">function</span><span style="color:#B392F0;--shiki-dark:#B392F0"> MyColorPicker</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">() {</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">  return</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> (</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">    &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">ColorPicker</span><span style="color:#B392F0;--shiki-dark:#B392F0"> defaultValue</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"#184"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">      &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">ColorArea</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">        colorSpace</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"hsb"</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">        xChannel</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"saturation"</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">        yChannel</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"brightness"</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">        style</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{{ width</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#79B8FF;--shiki-dark:#F8F8F8"> 192</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> height</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#79B8FF;--shiki-dark:#F8F8F8"> 192</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> borderRadius</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'var(--bui-radius-md)'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }}</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">      /></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">      &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">ColorSlider</span><span style="color:#B392F0;--shiki-dark:#B392F0"> colorSpace</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"hsb"</span><span style="color:#B392F0;--shiki-dark:#B392F0"> channel</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"hue"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> /></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">      &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">ColorField</span><span style="color:#B392F0;--shiki-dark:#B392F0"> label</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"Hex"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> /></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">    &#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">ColorPicker</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  );</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">}</span></span></code></pre>f:["$","$L32",null,{"out":"$37","title":"Building a color picker using React Aria and BUI tokens"}]
38:I[815120,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"IconMark"]
25:null
29:[["$","title","0",{"children":"Backstage UI"}],["$","meta","1",{"name":"description","content":"UI library for Backstage"}],["$","meta","2",{"property":"og:title","content":"Backstage UI"}],["$","meta","3",{"property":"og:description","content":"UI library for Backstage"}],["$","meta","4",{"property":"og:image","content":"https://ui.backstage.io/opengraph-image.jpg?opengraph-image.10.22h8p4jpb-.jpg"}],["$","meta","5",{"property":"og:image:type","content":"image/jpeg"}],["$","meta","6",{"property":"og:image:width","content":"1200"}],["$","meta","7",{"property":"og:image:height","content":"630"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Backstage UI"}],["$","meta","10",{"name":"twitter:description","content":"UI library for Backstage"}],["$","meta","11",{"name":"twitter:image","content":"https://ui.backstage.io/opengraph-image.jpg?opengraph-image.10.22h8p4jpb-.jpg"}],["$","meta","12",{"name":"twitter:image:type","content":"image/jpeg"}],["$","meta","13",{"name":"twitter:image:width","content":"1200"}],["$","meta","14",{"name":"twitter:image:height","content":"630"}],["$","link","15",{"rel":"icon","href":"/icon.svg?icon.06utu8u71m2--.svg","sizes":"any","type":"image/svg+xml"}],["$","$L38","16",{}]]