sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js"],"MetadataBoundary"] 24:I[39936,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js","/_next/static/chunks/14dt3d1hgg4fx.js","/_next/static/chunks/2d_fdrfe8me6m.js","/_next/static/chunks/1dwa3ngny_3fd.js"],""] 25:I[406729,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js"],"MainNav"] 26:I[460841,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js"],"Search"] 29:I[148068,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js","/_next/static/chunks/14dt3d1hgg4fx.js","/_next/static/chunks/2d_fdrfe8me6m.js","/_next/static/chunks/1dwa3ngny_3fd.js"],"Eyebrow"] 2a:I[109359,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js"],"NotOnHome"] 2c:I[937219,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js"],"FontLoader"] 2d:I[643551,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js"],"SchemeToggle"] 2f:I[357489,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js","/_next/static/chunks/14dt3d1hgg4fx.js","/_next/static/chunks/2d_fdrfe8me6m.js","/_next/static/chunks/1dwa3ngny_3fd.js"],"PreviewClient"] 31:I[767878,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js","/_next/static/chunks/14dt3d1hgg4fx.js","/_next/static/chunks/2d_fdrfe8me6m.js","/_next/static/chunks/1dwa3ngny_3fd.js"],"CodeFrame"] 33:I[360024,["/_next/static/chunks/37jgn1e9vvrvm.js","/_next/static/chunks/3ufx5ab19fbbn.js","/_next/static/chunks/0nryzd24wlysz.js","/_next/static/chunks/2deuvm24md5io.js","/_next/static/chunks/0_9skm7xu9pj3.js","/_next/static/chunks/15ohzoxsdqkxj.js","/_next/static/chunks/1jf85hgk-30sj.js","/_next/static/chunks/2r4k5101x1h0e.js","/_next/static/chunks/3rw75qhn9-wxe.js","/_next/static/chunks/2welwq694tnqz.js","/_next/static/chunks/0o4dp2d8mrhlg.js"],"IconMark"] :HL["/_next/static/chunks/0970f6nc6gw75.css","style"] 9:X 0:{"P":null,"c":["","docs","components","hero","hero-cards"],"q":"","i":false,"f":[[["",{"children":["docs",{"children":["components",{"children":[["name","hero","d",[]],{"children":[["example","hero-cards","d",[]],{"children":["__PAGE__",{},"$undefined","$undefined",4608]},"$undefined","$undefined",4608]},"$undefined","$undefined",4608]},"$undefined","$undefined",4608]},"$undefined","$undefined",4608]},"$undefined","$undefined",4624],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/1t_6tnkivqbj2.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/3_2dwdfpe_5b_.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/0u6ka3qv6o5mn.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/_next/static/chunks/19873_j-dinq5.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/37jgn1e9vvrvm.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/chunks/3ufx5ab19fbbn.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/chunks/0nryzd24wlysz.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/chunks/2deuvm24md5io.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/chunks/0_9skm7xu9pj3.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/chunks/15ohzoxsdqkxj.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/_next/static/chunks/1jf85hgk-30sj.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/_next/static/chunks/2r4k5101x1h0e.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/_next/static/chunks/3rw75qhn9-wxe.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/_next/static/chunks/2welwq694tnqz.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/_next/static/chunks/0o4dp2d8mrhlg.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","dir":"ltr","data-syntara-scheme":"auto","data-scroll-behavior":"smooth","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){try{var s=localStorage.getItem('syntara-docs-scheme');if(s==='light'||s==='dark'){document.documentElement.setAttribute('data-syntara-scheme',s)}}catch(e){}})();"}}],["$","link",null,{"rel":"preconnect","href":"https://fonts.googleapis.com"}],["$","link",null,{"rel":"preconnect","href":"https://fonts.gstatic.com","crossOrigin":"anonymous"}],["$","link",null,{"rel":"stylesheet","href":"https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"}],["$","style",null,{"id":"syntara-themes","dangerouslySetInnerHTML":{"__html":"$2"}}]]}],"$L3"]}]]}],{"children":["$L4",{"children":["$L5",{"children":["$L6",{"children":["$L7",{"children":["$L8",{},null,false,null]},null,false,"$9"]},null,false,"$9"]},null,false,"$9"]},null,false,null]},null,false,null],"$La",false]],"m":"$undefined","G":["$b",["$Lc","$Ld","$Le","$Lf"]],"S":true,"h":null,"r":"$undefined","s":"$undefined","a":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined","b":"vgMFFitAWX78J4ObIeZgA"} 3:["$","body",null,{"children":[["$","a",null,{"href":"#main","className":"skip-link-module__z13nyW__skip","children":"Skip to content"}],["$","$L10",null,{"children":[["$","$L11",null,{"children":["$","header",null,{"className":"site-header-module__22Ii_G__header","children":["$","div",null,{"className":"site-header-module__22Ii_G__inner","children":[["$","$L12",null,{"groups":[{"label":"Getting started","sections":[{"items":[{"href":"/docs","title":"Introduction"},{"href":"/docs/installation","title":"Installation"},{"href":"/docs/mcp","title":"MCP"},{"href":"/docs/server-driven-ui","title":"Server-driven UI"},{"href":"/docs/figma","title":"Figma"}]}]},{"label":"Foundations","sections":[{"items":[{"href":"/docs/theming","title":"Theming"},{"href":"/docs/color","title":"Using colour"},{"href":"/docs/dark-mode","title":"Dark mode"},{"href":"/docs/rtl","title":"RTL"},{"href":"/docs/density","title":"Density"},{"href":"/docs/accessibility","title":"Accessibility"},{"href":"/docs/icons","title":"Icons"}]}]},{"label":"Project","sections":[{"items":[{"href":"/docs/governance","title":"Governance"},{"href":"/docs/raise-a-conflict","title":"Raise a conflict"},{"href":"/docs/changelog","title":"Changelog"}]}]},{"label":"Components","sections":[{"items":[{"href":"/docs/components","title":"All components"}]},{"label":"Layout","items":[{"href":"/docs/components/card","title":"Card","badge":"$undefined"},{"href":"/docs/components/footer","title":"Footer","badge":"alpha"},{"href":"/docs/components/hero","title":"Hero","badge":"alpha"},{"href":"/docs/components/separator","title":"Separator","badge":"alpha"},{"href":"/docs/components/theme-scope","title":"Theme Scope","badge":"alpha"}]},{"label":"Actions","items":[{"href":"/docs/components/button","title":"Button","badge":"$undefined"},{"href":"/docs/components/toggle-group","title":"Toggle Group","badge":"$undefined"}]},{"label":"Inputs","items":[{"href":"/docs/components/calendar","title":"Calendar","badge":"$undefined"},{"href":"/docs/components/checkbox","title":"Checkbox","badge":"$undefined"},{"href":"/docs/components/chip","title":"Chip","badge":"alpha"},{"href":"/docs/components/combobox","title":"Combobox","badge":"alpha"},{"href":"/docs/components/date-picker","title":"Date Picker","badge":"$undefined"},{"href":"/docs/components/file-upload","title":"File Upload","badge":"alpha"},{"href":"/docs/components/prompt-composer","title":"Prompt Composer","badge":"alpha"},{"href":"/docs/components/radio-group","title":"Radio Group","badge":"$undefined"},{"href":"/docs/components/search-field","title":"Search Field","badge":"$undefined"},{"href":"/docs/components/select","title":"Select","badge":"$undefined"},{"href":"/docs/components/slider","title":"Slider","badge":"alpha"},{"href":"/docs/components/switch","title":"Switch","badge":"$undefined"},{"href":"/docs/components/text-area","title":"Text Area","badge":"alpha"},{"href":"/docs/components/text-field","title":"Text Field","badge":"$undefined"}]},{"label":"Overlays","items":[{"href":"/docs/components/alert-dialog","title":"Alert Dialog","badge":"$undefined"},{"href":"/docs/components/command","title":"Command","badge":"alpha"},{"href":"/docs/components/dialog","title":"Dialog","badge":"$undefined"},{"href":"/docs/components/menu","title":"Menu","badge":"$undefined"},{"href":"/docs/components/popover","title":"Popover","badge":"alpha"},{"href":"/docs/components/sheet","title":"Sheet","badge":"alpha"},{"href":"/docs/components/tooltip","title":"Tooltip","badge":"$undefined"}]},{"label":"Feedback","items":[{"href":"/docs/components/alert","title":"Alert","badge":"$undefined"},{"href":"/docs/components/empty-state","title":"Empty State","badge":"$undefined"},{"href":"/docs/components/meter","title":"Meter","badge":"$undefined"},{"href":"/docs/components/progress","title":"Progress Bar","badge":"$undefined"},{"href":"/docs/components/skeleton","title":"Skeleton","badge":"alpha"},{"href":"/docs/components/spinner","title":"Spinner","badge":"alpha"},{"href":"/docs/components/streaming-response","title":"Streaming Response","badge":"alpha"},{"href":"/docs/components/toast","title":"Toast","badge":"$undefined"}]},{"label":"Display","items":[{"href":"/docs/components/accordion","title":"Accordion","badge":"alpha"},{"href":"/docs/components/amount","title":"Amount","badge":"$undefined"},{"href":"/docs/components/avatar","title":"Avatar","badge":"$undefined"},{"href":"/docs/components/badge","title":"Badge","badge":"$undefined"},{"href":"/docs/components/eyebrow","title":"Eyebrow","badge":"$undefined"},{"href":"/docs/components/icon-tile","title":"Icon Tile","badge":"$undefined"},{"href":"/docs/components/kbd","title":"Kbd","badge":"alpha"},{"href":"/docs/components/marquee","title":"Marquee","badge":"alpha"},{"href":"/docs/components/person-chip","title":"Person Chip","badge":"$undefined"},{"href":"/docs/components/tag","title":"Tag","badge":"$undefined"}]},{"label":"Navigation","items":[{"href":"/docs/components/breadcrumbs","title":"Breadcrumbs","badge":"alpha"},{"href":"/docs/components/link","title":"Link","badge":"$undefined"},{"href":"/docs/components/pagination","title":"Pagination","badge":"alpha"},{"href":"/docs/components/sidebar","title":"Sidebar","badge":"alpha"},{"href":"/docs/components/steps","title":"Steps","badge":"$undefined"},{"href":"/docs/components/tabs","title":"Tabs","badge":"$undefined"}]},{"label":"Data","items":[{"href":"/docs/components/area-chart","title":"Area Chart","badge":"$undefined"},{"href":"/docs/components/bar-chart","title":"Bar Chart","badge":"$undefined"},{"href":"/docs/components/chart","title":"Chart","badge":"alpha"},{"href":"/docs/components/data-table","title":"Data Table","badge":"$undefined"},{"href":"/docs/components/sparkline","title":"Sparkline","badge":"$undefined"},{"href":"/docs/components/stat-tile","title":"Stat Tile","badge":"$undefined"}]}]}]}],"$L13","$L14","$L15"]}]}]}],"$L16","$L17"]}],"$L18"]}] 4:["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/1dj34ghz3fxdb.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/14dt3d1hgg4fx.js","async":true,"nonce":"$undefined"}]],["$","div",null,{"className":"docs-layout-module__wXhQQW__container","children":[["$","div",null,{"className":"docs-layout-module__wXhQQW__sidebar","children":["$","div",null,{"className":"docs-layout-module__wXhQQW__sidebarScroll","children":["$","$L19",null,{"groups":"$3:props:children:1:props:children:0:props:children:props:children:props:children:0:props:groups"}]}]}],["$","main",null,{"id":"main","className":"docs-layout-module__wXhQQW__main","tabIndex":-1,"children":["$","$L1a",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L1b",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]}]]}]]}] 5:["$","$1","c",{"children":[null,["$","$L1a",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L1b",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 6:["$","$1","c",{"children":[null,["$","$L1a",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L1b",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 7:["$","$1","c",{"children":[null,["$","$L1a",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L1b",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 8:["$","$1","c",{"children":["$L1c",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/3y6dwnma-kosm.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/2d_fdrfe8me6m.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/chunks/1dwa3ngny_3fd.js","async":true,"nonce":"$undefined"}]],["$","$L1d",null,{"children":["$","$1e",null,{"name":"Next.MetadataOutlet","children":"$@1f"}]}]]}] a:["$","$1","h",{"children":[null,["$","$L20",null,{"children":"$L21"}],["$","div",null,{"hidden":true,"children":["$","$L22",null,{"children":["$","$1e",null,{"name":"Next.Metadata","children":"$L23"}]}]}],null]}] c:["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/1t_6tnkivqbj2.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] d:["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/3_2dwdfpe_5b_.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] e:["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/0u6ka3qv6o5mn.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] f:["$","link","3",{"rel":"stylesheet","href":"/_next/static/chunks/19873_j-dinq5.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] 9:C 13:["$","$L24",null,{"href":"/","className":"site-header-module__22Ii_G__brand","aria-label":"Syntara home","children":[["$","svg",null,{"className":"$undefined","width":20,"height":20,"viewBox":"0 0 24 24","fill":"none","aria-hidden":"true","focusable":"false","children":[["$","rect",null,{"x":"2","y":"2.5","width":"14","height":"5","rx":"1.5","fill":"currentColor","opacity":"0.32"}],["$","rect",null,{"x":"5","y":"9.5","width":"14","height":"5","rx":"1.5","fill":"currentColor","opacity":"0.64"}],["$","rect",null,{"x":"8","y":"16.5","width":"14","height":"5","rx":"1.5","fill":"currentColor"}]]}],["$","span",null,{"className":"$undefined","aria-hidden":"true","children":"Syntara"}]]}] 14:["$","$L25",null,{}] 15:["$","div",null,{"className":"site-header-module__22Ii_G__actions","children":[["$","$L26",null,{"groups":[{"label":"Getting started","items":[{"href":"/docs","title":"Introduction","keywords":"A multi-brand design system: one React library, any brand, accessible by construction. overview about principles tenants","description":"A multi-brand design system: one React library, any brand, accessible by construction."},{"href":"/docs/installation","title":"Installation","keywords":"Add Syntara to a React project with npm, or by copying the files. install setup npm pnpm copy manual tokens styles","description":"Add Syntara to a React project with npm, or by copying the files."},{"href":"/docs/mcp","title":"MCP","keywords":"The planned Syntara MCP server for AI coding agents. mcp agents claude cursor ai model context protocol","description":"The planned Syntara MCP server for AI coding agents."},{"href":"/docs/server-driven-ui","title":"Server-driven UI","keywords":"Syntara as a JSON contract: a schema per component, a validator, and one web renderer. sdui server driven ui json schema mobile app native compose swiftui kotlin swift renderer validator","description":"Syntara as a JSON contract: a schema per component, a validator, and one web renderer."},{"href":"/docs/figma","title":"Figma","keywords":"Import Syntara tokens as Figma variables: Brand, Scheme and Density collections. figma variables design collections modes","description":"Import Syntara tokens as Figma variables: Brand, Scheme and Density collections."}]},{"label":"Foundations","items":[{"href":"/docs/theming","title":"Theming","keywords":"Token tiers, semantic roles, ThemeScope, and adding a tenant with one JSON file. tokens css variables brand tenant theme scope roles","description":"Token tiers, semantic roles, ThemeScope, and adding a tenant with one JSON file."},{"href":"/docs/color","title":"Using colour","keywords":"Which colour role to use for what, the pairs the engine guarantees, and how to check your own. color colour roles contrast pairs palette brand status feedback chart glass swatches do dont","description":"Which colour role to use for what, the pairs the engine guarantees, and how to check your own."},{"href":"/docs/dark-mode","title":"Dark mode","keywords":"Light, dark and system schemes from one attribute. dark light scheme prefers-color-scheme","description":"Light, dark and system schemes from one attribute."},{"href":"/docs/rtl","title":"RTL","keywords":"Right-to-left layouts with logical properties and React Aria locales. rtl arabic direction logical properties locale","description":"Right-to-left layouts with logical properties and React Aria locales."},{"href":"/docs/density","title":"Density","keywords":"Comfortable and compact density without changing component code. density compact comfortable control height","description":"Comfortable and compact density without changing component code."},{"href":"/docs/accessibility","title":"Accessibility","keywords":"WCAG 2.2 AA contrast by construction, keyboard support from React Aria. a11y wcag contrast keyboard screen reader focus","description":"WCAG 2.2 AA contrast by construction, keyboard support from React Aria."},{"href":"/docs/icons","title":"Icons","keywords":"Syntara’s own icon set, curvy and minimal. Search it, try a size and stroke, copy an import. icons svg glyphs @syntara/icons stroke grid tabler lucide","description":"Syntara’s own icon set, curvy and minimal. Search it, try a size and stroke, copy an import."}]},{"label":"Project","items":[{"href":"/docs/governance","title":"Governance","keywords":"Decision records, how changes get in, maturity criteria, and who decides. adr decisions contribution rfc process maturity alpha beta stable graduation","description":"Decision records, how changes get in, maturity criteria, and who decides."},{"href":"/docs/raise-a-conflict","title":"Raise a conflict","keywords":"Two rules, two products, or a past decision pulling different ways? Raise it here. conflict disagree dispute issue request clash priority order governance","description":"Two rules, two products, or a past decision pulling different ways? Raise it here."},{"href":"/docs/changelog","title":"Changelog","keywords":"What shipped in each release. releases versions changes","description":"What shipped in each release."}]},{"label":"Components","items":[{"href":"/docs/components","title":"All components","keywords":"index overview list","description":"Every component, grouped by what it does."},{"href":"/docs/components/accordion","title":"Accordion","keywords":"accordion Display A stack of headings that each show or hide a section of content. Accordion AccordionItem","description":"A stack of headings that each show or hide a section of content.","meta":"Display"},{"href":"/docs/components/alert","title":"Alert","keywords":"alert Feedback An inline message about the page or a section of it, in one of five tones. Alert","description":"An inline message about the page or a section of it, in one of five tones.","meta":"Feedback"},{"href":"/docs/components/alert-dialog","title":"Alert Dialog","keywords":"alert-dialog Overlays A modal confirmation that interrupts the user before a destructive or irreversible action. AlertDialog","description":"A modal confirmation that interrupts the user before a destructive or irreversible action.","meta":"Overlays"},{"href":"/docs/components/amount","title":"Amount","keywords":"amount Display Money set as typography: a locale-grouped figure in the heading face with a small raised currency sign. Amount","description":"Money set as typography: a locale-grouped figure in the heading face with a small raised currency sign.","meta":"Display"},{"href":"/docs/components/area-chart","title":"Area Chart","keywords":"area-chart Data A trend over time: a smooth line with a gradient fill, plus LineChart for comparing series without fills. AreaChart LineChart","description":"A trend over time: a smooth line with a gradient fill, plus LineChart for comparing series without fills.","meta":"Data"},{"href":"/docs/components/avatar","title":"Avatar","keywords":"avatar Display A person or entity shown as a photo, or as initials on a soft tint when there is no photo. Also an empty seat: \"+\" to add someone, \"?\" for someone not added yet. Avatar AvatarGroup getInitials getAvatarTint","description":"A person or entity shown as a photo, or as initials on a soft tint when there is no photo. Also an empty seat: \"+\" to add someone, \"?\" for someone not added yet.","meta":"Display"},{"href":"/docs/components/badge","title":"Badge","keywords":"badge Display A short label for a status, category or count. Badge","description":"A short label for a status, category or count.","meta":"Display"},{"href":"/docs/components/bar-chart","title":"Bar Chart","keywords":"bar-chart Data Compares magnitudes across categories with vertical bars: rounded data ends, grouped series and an optional highlighted bar. BarChart","description":"Compares magnitudes across categories with vertical bars: rounded data ends, grouped series and an optional highlighted bar.","meta":"Data"},{"href":"/docs/components/breadcrumbs","title":"Breadcrumbs","keywords":"breadcrumbs Navigation Shows where the current page sits in the hierarchy, with links back to each level. Breadcrumbs Breadcrumb","description":"Shows where the current page sits in the hierarchy, with links back to each level.","meta":"Navigation"},{"href":"/docs/components/button","title":"Button","keywords":"button Actions Triggers an action, with variants for emphasis, a danger tone for destructive actions, three sizes plus icon-only, and a pending state. Button","description":"Triggers an action, with variants for emphasis, a danger tone for destructive actions, three sizes plus icon-only, and a pending state.","meta":"Actions"},{"href":"/docs/components/calendar","title":"Calendar","keywords":"calendar Inputs A month grid for picking a date or a date range, always visible on the page. Calendar RangeCalendar","description":"A month grid for picking a date or a date range, always visible on the page.","meta":"Inputs"},{"href":"/docs/components/card","title":"Card","keywords":"card Layout A surface that groups related content and actions. Card CardMedia CardHeader CardTitle CardDescription CardAction CardContent CardFooter","description":"A surface that groups related content and actions.","meta":"Layout"},{"href":"/docs/components/chart","title":"Chart","keywords":"chart Data Shared chart pieces: the legend, the tooltip readout, the data table and the ChartFrame shell that AreaChart and BarChart draw into. ChartLegend ChartTooltip ChartTable ChartFrame chartColor chartTicks chartLinePath chartAreaPath chartAxisFormat formatChartValue formatChartX useChartSize","description":"Shared chart pieces: the legend, the tooltip readout, the data table and the ChartFrame shell that AreaChart and BarChart draw into.","meta":"Data"},{"href":"/docs/components/checkbox","title":"Checkbox","keywords":"checkbox Inputs Selects one or more options, alone or in a labelled group, with indeterminate and invalid states. Checkbox CheckboxGroup","description":"Selects one or more options, alone or in a labelled group, with indeterminate and invalid states.","meta":"Inputs"},{"href":"/docs/components/chip","title":"Chip","keywords":"chip Inputs Pills the user picks or removes: filters, a single choice, or values they entered. ChipGroup Chip","description":"Pills the user picks or removes: filters, a single choice, or values they entered.","meta":"Inputs"},{"href":"/docs/components/combobox","title":"Combobox","keywords":"combobox Inputs A text input that filters a list of options as people type, for picking from long lists. Combobox ComboboxItem ComboboxSection","description":"A text input that filters a list of options as people type, for picking from long lists.","meta":"Inputs"},{"href":"/docs/components/command","title":"Command","keywords":"command Overlays A ⌘K command palette: a modal search field that filters commands and destinations as you type. CommandDialog CommandItem CommandSection useCommandShortcut","description":"A ⌘K command palette: a modal search field that filters commands and destinations as you type.","meta":"Overlays"},{"href":"/docs/components/data-table","title":"Data Table","keywords":"data-table Data A table for records people scan, compare, sort and select, with loading and empty states. DataTable useSortedRows DataTableToolbar DataTablePagination","description":"A table for records people scan, compare, sort and select, with loading and empty states.","meta":"Data"},{"href":"/docs/components/date-picker","title":"Date Picker","keywords":"date-picker Inputs A date field typed segment by segment, with a calendar popover for picking by sight. DatePicker DateRangePicker","description":"A date field typed segment by segment, with a calendar popover for picking by sight.","meta":"Inputs"},{"href":"/docs/components/dialog","title":"Dialog","keywords":"dialog Overlays A modal window for a focused task — a short form, a decision or details — that blocks the page until it is closed. Dialog DialogTrigger","description":"A modal window for a focused task — a short form, a decision or details — that blocks the page until it is closed.","meta":"Overlays"},{"href":"/docs/components/empty-state","title":"Empty State","keywords":"empty-state Feedback What to show when there is nothing to show: no data yet, no results, or nothing left to do. EmptyState","description":"What to show when there is nothing to show: no data yet, no results, or nothing left to do.","meta":"Feedback"},{"href":"/docs/components/eyebrow","title":"Eyebrow","keywords":"eyebrow Display A small uppercase kicker label with wide tracking that sits above a heading, figure or section. Eyebrow","description":"A small uppercase kicker label with wide tracking that sits above a heading, figure or section.","meta":"Display"},{"href":"/docs/components/file-upload","title":"File Upload","keywords":"file-upload Inputs A drop zone with a browse button and the list of chosen files, with size and type checks. FileUpload","description":"A drop zone with a browse button and the list of chosen files, with size and type checks.","meta":"Inputs"},{"href":"/docs/components/footer","title":"Footer","keywords":"footer Layout A site footer: an oversized wordmark cut off by a hairline horizon and lit from one corner, over an aside and columns of links. Footer FooterColumn FooterLink FooterSocialLink FooterStatus","description":"A site footer: an oversized wordmark cut off by a hairline horizon and lit from one corner, over an aside and columns of links.","meta":"Layout"},{"href":"/docs/components/hero","title":"Hero","keywords":"hero Layout The opening section of a website page: a big headline, a sentence and what to do next, over a moving decoration in the brand's colours. Follows the page's light or dark scheme, or stays dark with scheme=\"dark\". Styles: aurora, orbit, gallery, cards. Hero","description":"The opening section of a website page: a big headline, a sentence and what to do next, over a moving decoration in the brand's colours. Follows the page's light or dark scheme, or stays dark with scheme=\"dark\". Styles: aurora, orbit, gallery, cards.","meta":"Layout"},{"href":"/docs/components/icon-tile","title":"Icon Tile","keywords":"icon-tile Display A rounded-square tile holding an icon or logo on a contrast-checked tint or the brand fill. IconTile","description":"A rounded-square tile holding an icon or logo on a contrast-checked tint or the brand fill.","meta":"Display"},{"href":"/docs/components/kbd","title":"Kbd","keywords":"kbd Display A keyboard key or shortcut, shown as a small keycap. Kbd KbdGroup","description":"A keyboard key or shortcut, shown as a small keycap.","meta":"Display"},{"href":"/docs/components/link","title":"Link","keywords":"link Navigation Navigates to another page or section, inline in text or as a standalone link. Link","description":"Navigates to another page or section, inline in text or as a standalone link.","meta":"Navigation"},{"href":"/docs/components/marquee","title":"Marquee","keywords":"marquee Display A strip of logos, quotes or cards that scrolls by itself in a seamless loop, with a pause button. Marquee","description":"A strip of logos, quotes or cards that scrolls by itself in a seamless loop, with a pause button.","meta":"Display"},{"href":"/docs/components/menu","title":"Menu","keywords":"menu Overlays A list of actions or options that opens from a button, with icons, shortcuts, sections, submenus and selection. Menu MenuItem MenuSection MenuSeparator MenuTrigger SubmenuTrigger","description":"A list of actions or options that opens from a button, with icons, shortcuts, sections, submenus and selection.","meta":"Overlays"},{"href":"/docs/components/meter","title":"Meter","keywords":"meter Feedback A quantity within a known range, such as wallet usage, storage or a limit, with a label, a readout and a slim track. Meter","description":"A quantity within a known range, such as wallet usage, storage or a limit, with a label, a readout and a slim track.","meta":"Feedback"},{"href":"/docs/components/pagination","title":"Pagination","keywords":"pagination Navigation Moves between pages of a long list or table. Pagination","description":"Moves between pages of a long list or table.","meta":"Navigation"},{"href":"/docs/components/person-chip","title":"Person Chip","keywords":"person-chip Display A person as a small avatar and their name in a pill, with a placeholder for someone not added yet. PersonChip PersonChipGroup","description":"A person as a small avatar and their name in a pill, with a placeholder for someone not added yet.","meta":"Display"},{"href":"/docs/components/popover","title":"Popover","keywords":"popover Overlays A floating panel anchored to a trigger, for rich or interactive content such as a small form, filters or details. Popover","description":"A floating panel anchored to a trigger, for rich or interactive content such as a small form, filters or details.","meta":"Overlays"},{"href":"/docs/components/progress","title":"Progress Bar","keywords":"progress Feedback Shows how far a task has got, or that it is working when the duration is unknown. ProgressBar","description":"Shows how far a task has got, or that it is working when the duration is unknown.","meta":"Feedback"},{"href":"/docs/components/prompt-composer","title":"Prompt Composer","keywords":"prompt-composer Inputs The box where people write to an AI: a growing text area, pill controls for attachments and modes, and a send button, edged with a glow in the brand's colours. PromptComposer ComposerButton ComposerSelect","description":"The box where people write to an AI: a growing text area, pill controls for attachments and modes, and a send button, edged with a glow in the brand's colours.","meta":"Inputs"},{"href":"/docs/components/radio-group","title":"Radio Group","keywords":"radio-group Inputs Picks exactly one option from a short list, as classic radios or as selectable cards with a title and description. RadioGroup Radio","description":"Picks exactly one option from a short list, as classic radios or as selectable cards with a title and description.","meta":"Inputs"},{"href":"/docs/components/search-field","title":"Search Field","keywords":"search-field Inputs A search input with a leading icon and a clear button; Escape clears and Enter submits. SearchField","description":"A search input with a leading icon and a clear button; Escape clears and Enter submits.","meta":"Inputs"},{"href":"/docs/components/select","title":"Select","keywords":"select Inputs Lets people choose one option from a short list that opens from a button. Select SelectItem SelectSection","description":"Lets people choose one option from a short list that opens from a button.","meta":"Inputs"},{"href":"/docs/components/separator","title":"Separator","keywords":"separator Layout A hairline between groups of content, optionally with a short label such as \"or\". Separator","description":"A hairline between groups of content, optionally with a short label such as \"or\".","meta":"Layout"},{"href":"/docs/components/sheet","title":"Sheet","keywords":"sheet Overlays A modal panel that slides in from an edge of the viewport, for filters, details and secondary tasks that keep the page in context. Sheet","description":"A modal panel that slides in from an edge of the viewport, for filters, details and secondary tasks that keep the page in context.","meta":"Overlays"},{"href":"/docs/components/sidebar","title":"Sidebar","keywords":"sidebar Navigation App navigation: a brand block, a search slot, labelled sections of links with icons, counts, badges and expandable groups, a footer with the signed-in user, and an icon-rail collapsed mode. Sidebar SidebarHeader SidebarSearch SidebarSection SidebarItem SidebarFooter SidebarUser useSidebar","description":"App navigation: a brand block, a search slot, labelled sections of links with icons, counts, badges and expandable groups, a footer with the signed-in user, and an icon-rail collapsed mode.","meta":"Navigation"},{"href":"/docs/components/skeleton","title":"Skeleton","keywords":"skeleton Feedback Placeholder shapes that stand in for content while it loads. Skeleton SkeletonText","description":"Placeholder shapes that stand in for content while it loads.","meta":"Feedback"},{"href":"/docs/components/slider","title":"Slider","keywords":"slider Inputs Picks a number or a range by dragging or with the keyboard, with a formatted value next to the label. Slider","description":"Picks a number or a range by dragging or with the keyboard, with a formatted value next to the label.","meta":"Inputs"},{"href":"/docs/components/sparkline","title":"Sparkline","keywords":"sparkline Data A small trend line for stat cards and table cells, decorative unless you name it. Sparkline","description":"A small trend line for stat cards and table cells, decorative unless you name it.","meta":"Data"},{"href":"/docs/components/spinner","title":"Spinner","keywords":"spinner Feedback A small loading indicator in the current text colour. Spinner","description":"A small loading indicator in the current text colour.","meta":"Feedback"},{"href":"/docs/components/stat-tile","title":"Stat Tile","keywords":"stat-tile Data One headline number with its label, change and optional trend line. StatTile StatTileGroup formatDelta","description":"One headline number with its label, change and optional trend line.","meta":"Data"},{"href":"/docs/components/steps","title":"Steps","keywords":"steps Navigation Shows progress through a multi-step flow: which steps are done, which is current and what comes next. Steps","description":"Shows progress through a multi-step flow: which steps are done, which is current and what comes next.","meta":"Navigation"},{"href":"/docs/components/streaming-response","title":"Streaming Response","keywords":"streaming-response Feedback A model's response as it is written, that screen readers can follow: each finished sentence is spoken once, then how it ended. StreamingResponse ResponseText ResponseSources ResponseSource","description":"A model's response as it is written, that screen readers can follow: each finished sentence is spoken once, then how it ended.","meta":"Feedback"},{"href":"/docs/components/switch","title":"Switch","keywords":"switch Inputs Turns a setting on or off immediately, with its label on the inline-end side and optional help text. Switch","description":"Turns a setting on or off immediately, with its label on the inline-end side and optional help text.","meta":"Inputs"},{"href":"/docs/components/tabs","title":"Tabs","keywords":"tabs Navigation Switches between related panels of content in the same place, one visible at a time. Tabs TabList Tab TabPanel","description":"Switches between related panels of content in the same place, one visible at a time.","meta":"Navigation"},{"href":"/docs/components/tag","title":"Tag","keywords":"tag Display A quiet, static label for an attribute or category, such as \"Cashless\" or \"Home collection\". Tag","description":"A quiet, static label for an attribute or category, such as \"Cashless\" or \"Home collection\".","meta":"Display"},{"href":"/docs/components/text-area","title":"Text Area","keywords":"text-area Inputs A multi-line text input with label, help text, validation, optional auto-resize and a character counter. TextArea","description":"A multi-line text input with label, help text, validation, optional auto-resize and a character counter.","meta":"Inputs"},{"href":"/docs/components/text-field","title":"Text Field","keywords":"text-field Inputs A single-line text input with label, help text, validation and optional prefix/suffix, plus the field primitives other inputs compose. TextField Label Description FieldError Input FieldGroup","description":"A single-line text input with label, help text, validation and optional prefix/suffix, plus the field primitives other inputs compose.","meta":"Inputs"},{"href":"/docs/components/theme-scope","title":"Theme Scope","keywords":"theme-scope Layout Applies a Syntara theme, colour scheme and density to everything inside it. ThemeScope","description":"Applies a Syntara theme, colour scheme and density to everything inside it.","meta":"Layout"},{"href":"/docs/components/toast","title":"Toast","keywords":"toast Feedback A brief, stacked notification about something that just happened, with an optional action. ToastRegion toast","description":"A brief, stacked notification about something that just happened, with an optional action.","meta":"Feedback"},{"href":"/docs/components/toggle-group","title":"Toggle Group","keywords":"toggle-group Actions A segmented control of toggle buttons for switching views or filters, plus a standalone toggle button. ToggleButtonGroup ToggleButton","description":"A segmented control of toggle buttons for switching views or filters, plus a standalone toggle button.","meta":"Actions"},{"href":"/docs/components/tooltip","title":"Tooltip","keywords":"tooltip Overlays A short text label that appears on hover or keyboard focus to name or explain a control. Tooltip TooltipTrigger","description":"A short text label that appears on hover or keyboard focus to name or explain a control.","meta":"Overlays"}]},{"label":"Pages","items":[{"href":"/","title":"Home","keywords":"start landing","description":"Syntara at a glance, live in every tenant."},{"href":"/blocks","title":"Blocks","keywords":"patterns screens","description":"Whole screens built only from Syntara components."},{"href":"/themes","title":"Themes","keywords":"tenants brands generator","description":"Type a brand colour, get an accessible theme."},{"href":"/colors","title":"Colors","keywords":"palette ramps roles","description":"Every brand’s ramps, light and dark. Click to copy."},{"href":"/story","title":"Story","keywords":"case study decisions evidence rollout numbers","description":"How it was built, the numbers, and what they do not cover."}]}]}],"$L27","$L28"]}] 16:["$","div",null,{"className":"layout-module__gDtl5q__page","children":["$","$L1a",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L1b",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","main",null,{"id":"main","tabIndex":-1,"className":"page-shell-module__wEP4ZG__main","children":["$","div",null,{"className":"page-shell-module__wEP4ZG__container","data-width":"default","children":[["$","header",null,{"className":"page-shell-module__wEP4ZG__header","children":[["$","$L29",null,{"lead":"rule","className":"page-shell-module__wEP4ZG__eyebrow","children":"404"}],["$","h1",null,{"className":"page-shell-module__wEP4ZG__title","children":"This page doesn’t exist"}],["$","p",null,{"className":"page-shell-module__wEP4ZG__description","children":"It may have moved, or the link has a typo. Search with ⌘K, or start from the docs."}],["$","div",null,{"className":"page-shell-module__wEP4ZG__actions","children":[["$","$L24",null,{"href":"/docs","className":"button-link-module__zK_ymG__link","data-variant":"primary","data-size":"md","children":"Go to the docs"}],["$","$L24",null,{"href":"/","className":"button-link-module__zK_ymG__link","data-variant":"ghost","data-size":"md","children":"Home"}]]}]]}],"$undefined"]}]}],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0970f6nc6gw75.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]}] 17:["$","$L2a",null,{"children":["$","footer",null,{"className":"site-footer-module__3yZN7q__footer","children":["$","div",null,{"className":"site-footer-module__3yZN7q__inner","children":[["$","div",null,{"className":"site-footer-module__3yZN7q__top","children":[["$","div",null,{"className":"site-footer-module__3yZN7q__statement","children":[["$","$L24",null,{"href":"/","className":"site-footer-module__3yZN7q__brand","aria-label":"Syntara home","children":[["$","svg",null,{"className":"$undefined","width":20,"height":20,"viewBox":"0 0 24 24","fill":"none","aria-hidden":"true","focusable":"false","children":[["$","rect",null,{"x":"2","y":"2.5","width":"14","height":"5","rx":"1.5","fill":"currentColor","opacity":"0.32"}],["$","rect",null,{"x":"5","y":"9.5","width":"14","height":"5","rx":"1.5","fill":"currentColor","opacity":"0.64"}],["$","rect",null,{"x":"8","y":"16.5","width":"14","height":"5","rx":"1.5","fill":"currentColor"}]]}],["$","span",null,{"aria-hidden":"true","children":"Syntara"}]]}],["$","p",null,{"className":"site-footer-module__3yZN7q__line","children":["One React library, ",["$","em",null,{"children":"any brand"}],", accessible by construction."]}]]}],["$","nav",null,{"aria-label":"Footer","className":"site-footer-module__3yZN7q__columns","children":[["$","div","Start",{"className":"site-footer-module__3yZN7q__column","children":[["$","p",null,{"className":"site-footer-module__3yZN7q__columnTitle","children":"Start"}],["$","ul",null,{"className":"site-footer-module__3yZN7q__list","children":[["$","li","/docs",{"children":["$","$L24",null,{"href":"/docs","className":"site-footer-module__3yZN7q__link","children":"Introduction"}]}],["$","li","/docs/installation",{"children":["$","$L24",null,{"href":"/docs/installation","className":"site-footer-module__3yZN7q__link","children":"Installation"}]}],["$","li","/docs/theming",{"children":["$","$L24",null,{"href":"/docs/theming","className":"site-footer-module__3yZN7q__link","children":"Theming"}]}]]}]]}],["$","div","Build",{"className":"site-footer-module__3yZN7q__column","children":[["$","p",null,{"className":"site-footer-module__3yZN7q__columnTitle","children":"Build"}],["$","ul",null,{"className":"site-footer-module__3yZN7q__list","children":[["$","li","/docs/components",{"children":["$","$L24",null,{"href":"/docs/components","className":"site-footer-module__3yZN7q__link","children":"Components"}]}],["$","li","/blocks",{"children":["$","$L24",null,{"href":"/blocks","className":"site-footer-module__3yZN7q__link","children":"Blocks"}]}],["$","li","/docs/icons",{"children":["$","$L24",null,{"href":"/docs/icons","className":"site-footer-module__3yZN7q__link","children":"Icons"}]}]]}]]}],["$","div","Brand",{"className":"site-footer-module__3yZN7q__column","children":[["$","p",null,{"className":"site-footer-module__3yZN7q__columnTitle","children":"Brand"}],["$","ul",null,{"className":"site-footer-module__3yZN7q__list","children":[["$","li","/themes",{"children":["$","$L24",null,{"href":"/themes","className":"site-footer-module__3yZN7q__link","children":"Themes"}]}],["$","li","/colors",{"children":["$","$L24",null,{"href":"/colors","className":"site-footer-module__3yZN7q__link","children":"Colors"}]}],["$","li","/docs/icons",{"children":["$","$L24",null,{"href":"/docs/icons","className":"site-footer-module__3yZN7q__link","children":"Icons"}]}],["$","li","/docs/accessibility",{"children":["$","$L24",null,{"href":"/docs/accessibility","className":"site-footer-module__3yZN7q__link","children":"Accessibility"}]}]]}]]}],["$","div","Project",{"className":"site-footer-module__3yZN7q__column","children":[["$","p",null,{"className":"site-footer-module__3yZN7q__columnTitle","children":"Project"}],["$","ul",null,{"className":"site-footer-module__3yZN7q__list","children":[["$","li","/story",{"children":["$","$L24",null,{"href":"/story","className":"site-footer-module__3yZN7q__link","children":"Story"}]}],["$","li","/docs/governance",{"children":["$","$L24",null,{"href":"/docs/governance","className":"site-footer-module__3yZN7q__link","children":"Decisions"}]}],["$","li","/docs/raise-a-conflict",{"children":["$","$L24",null,{"href":"/docs/raise-a-conflict","className":"site-footer-module__3yZN7q__link","children":"Raise a conflict"}]}],["$","li","/docs/changelog",{"children":["$","$L24",null,{"href":"/docs/changelog","className":"site-footer-module__3yZN7q__link","children":"Changelog"}]}],["$","li","https://github.com/anujpatel06/syntara",{"children":["$","a",null,{"href":"https://github.com/anujpatel06/syntara","className":"site-footer-module__3yZN7q__link","target":"_blank","rel":"noreferrer","children":"GitHub"}]}]]}]]}]]}]]}],"$L2b"]}]}]}] 18:["$","$L2c",null,{"hrefs":["https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap","https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap","https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap","https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap","https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"]}] 27:["$","a",null,{"href":"https://github.com/anujpatel06/syntara","className":"site-header-module__22Ii_G__iconLink","aria-label":"Syntara on GitHub","target":"_blank","rel":"noreferrer","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-brand-github","aria-hidden":true,"children":["$undefined",["$","path","svg-0",{"d":"M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"}],"$undefined"]}]}] 28:["$","$L2d",null,{}] 2b:["$","p",null,{"className":"site-footer-module__3yZN7q__colophon","children":["Designed by Anuj Patel, engineering paired with Claude. Every decision is recorded with who made it, in"," ",["$","a",null,{"href":"https://github.com/anujpatel06/syntara/tree/main/docs/adr","className":"site-footer-module__3yZN7q__inlineLink","children":"docs/adr"}],".",["$","span",null,{"className":"site-footer-module__3yZN7q__version","children":[" @syntara/react ","0.2.0"]}]]}] 1c:["$","div",null,{"className":"docs-page-module__4rgZMq__page","data-toc":"$undefined","children":[["$","article",null,{"className":"docs-page-module__4rgZMq__article","data-wide":true,"children":[["$","header",null,{"className":"docs-page-module__4rgZMq__header","children":[["$","nav",null,{"aria-label":"Section","children":["$","$L29",null,{"lead":"rule","className":"docs-page-module__4rgZMq__eyebrow","children":[["$","span","Components",{"children":[false,["$","$L24",null,{"href":"/docs/components","className":"docs-page-module__4rgZMq__eyebrowLink","children":"Components"}]]}],["$","span","Layout",{"children":[["$","span",null,{"aria-hidden":"true","children":" · "}],"Layout"]}],["$","span","Hero",{"children":[["$","span",null,{"aria-hidden":"true","children":" · "}],["$","$L24",null,{"href":"/docs/components/hero","className":"docs-page-module__4rgZMq__eyebrowLink","children":"Hero"}]]}]]}]}],["$","h1",null,{"className":"docs-page-module__4rgZMq__title","children":"Card fan"}],["$","p",null,{"className":"docs-page-module__4rgZMq__lead","children":"variant=\"cards\": centred copy over a fan of up to five cards on solved brand colours, with name-tagged cursors drifting beside the headline. Hover the fan to spread it."}],"$undefined"]}],["$","div",null,{"className":"docs-page-module__4rgZMq__body prose-module__t290cG__flow","children":["$L2e",["$","p",null,{"children":[["$","$L24",null,{"href":"/docs/components/hero","className":"prose-module__t290cG__a","children":["All of ","Hero"]}],": installation, usage, props and accessibility."],"className":"prose-module__t290cG__p"}]]}],["$","footer",null,{"className":"docs-page-module__4rgZMq__footer","children":["$undefined",["$","a",null,{"href":"https://github.com/anujpatel06/syntara/blob/main/apps/docs/examples/hero/hero-cards.tsx","className":"docs-page-module__4rgZMq__edit","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":14,"height":14,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":1.5,"style":{"flexShrink":0},"data-syntara-icon":"pencil","aria-hidden":true,"focusable":false,"children":[["$","path","0",{"d":"M18.29 9.1L11.58 15.82Q10.69 16.7 9.5 17.09L6.11 18.21Q5.64 18.36 5.79 17.89L6.91 14.5Q7.3 13.31 8.18 12.42L14.9 5.71A2.4 2.4 0 0 1 18.29 9.1Z"}]]}],"Edit this page on GitHub"]}]]}]]}],false]}] 2e:["$","$L2f",null,{"name":"hero-cards","label":"Hero: Card fan","align":"center","tenants":[{"id":"vela","name":"Vela","density":"compact","locale":"en-IN","dir":"ltr"},{"id":"harbor","name":"Harbor","density":"comfortable","locale":"en-GB","dir":"ltr"},{"id":"qamar","name":"Qamar","density":"comfortable","locale":"ar-AE-u-nu-arab","dir":"rtl"},{"id":"care","name":"Care","density":"comfortable","locale":"en-IN","dir":"ltr"},{"id":"haat","name":"Haat","density":"comfortable","locale":"hi-IN-u-nu-deva","dir":"ltr"},{"id":"house","name":"House","density":"comfortable","locale":"en-US","dir":"ltr"}],"code":"$L30"}] 32:T486e,

'use client';

import { Badge, Button, Hero } from '@syntara/react';
import { IconArrowRight } from '@syntara/icons';

/*
 * variant="cards": centred copy over a fan of up to five cards, each on a different solved brand colour, with two
 * name-tagged cursors drifting beside the headline on wide screens. Hover the fan to spread it.
 * Sample pictures: Unsplash License (free to use, commercial use included), credited anyway — mymind, Milad Fakurian,
 * Olga Deeva, Tiago Wolf, SIMON LEE.
 */
export default function Example() {
  return (
    <Hero
      variant="cards"
      headingLevel={2}
      eyebrow={
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--syntara-space-2)', color: 'var(--syntara-color-text-subtle)', fontSize: 'var(--syntara-font-size-sm)' }}>
          <Badge tone="brand" size="sm">
            New
          </Badge>
          Shared boards for every team
        </span>
      }
      title="Plan it together"
      titleSecondary="ship it on time"
      description="One workspace for briefs, budgets and approvals, so nothing waits in someone’s inbox."
      actions={
        <Button size="lg">
          Try it free
          <IconArrowRight aria-hidden />
        </Button>
      }
      cards={[
        { title: 'Briefs', meta: '12 this week', image: '/hero-gallery/12-orange-orb-on-blue.webp' },
        { title: 'Budgets', meta: 'On track', image: '/hero-gallery/02-pastel-spheres-on-gradient.webp' },
        { title: 'Approvals', meta: '3 waiting', image: '/hero-gallery/15-colourful-3d-object.webp' },
        { title: 'Calendar', meta: 'Next: Friday', image: '/hero-gallery/17-abstract-3d-design.webp' },
        { title: 'Reports', meta: 'Updated today', image: '/hero-gallery/18-pink-and-purple-object.webp' },
      ]}
      cursors={['Priya', 'Omar']}
      style={{ inlineSize: '100%' }}
    />
  );
}

Plan it together ship it on time