[{"data":1,"prerenderedAt":588},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript":65,"nav:v1":444},{"id":4,"extension":5,"meta":6,"sections":7,"stem":62,"tagline":63,"__hash__":64},"landing\u002Flanding.yml","yml",{},[8,18,22,29,33,40,47,51,57],{"id":9,"headline":10,"body":11,"cta":12,"secondary":15},"hero","The bare minimum for elegant interfaces.","Three classes, no framework, {css.kB}. A CSS and JavaScript library with no reset, no font, no runtime dependencies and no rule outside a `pui-` class; the browser does the work.",{"label":13,"to":14},"Get started","\u002Fdocs",{"label":16,"to":17},"Migrating from 0.x","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-0-x",{"id":19,"headline":20,"body":21},"size","{css.kB}. Measured, not promised.","`perfectui.css` is {css.bytes} bytes gzip; the optional JavaScript loader is {js.bytes}. The bars below are the same measurement run on the published builds of the alternatives.",{"id":23,"headline":24,"body":25,"cta":26},"classes","A shape, a style, a colour.","Every element is up to three classes you can combine freely: what it is, how the colour is applied, which colour. Seven colours and four styles give 28 looks per shape, and adding a colour never multiplies your classes.",{"label":27,"to":28},"See the components","\u002Fdocs\u002Fcomponents\u002Fbutton",{"id":30,"headline":31,"body":32},"overlays","Overlays without a plugin.","Modals are `\u003Cdialog>`, menus are `popover`, tooltips are `interestfor`, accordions are `\u003Cdetails>`. The optional loader downloads a fallback only when a browser is missing one of them.",{"id":34,"headline":35,"body":36,"cta":37},"mode-theme","One attribute for dark mode. One variable for your colour.","With no attribute, perfectui follows the operating system. Set `data-pui-mode` to choose, and `--pui-theme` to make every component yours.",{"label":38,"to":39},"Dark mode docs","\u002Fdocs\u002Fcustomization\u002Fdark-mode",{"id":41,"headline":42,"body":43,"cta":44},"tailwind","Your utilities always win.","One `@layer` line keeps Tailwind's reset below perfectui and every utility above it.",{"label":45,"to":46},"Tailwind guide","\u002Fdocs\u002Fgetting-started\u002Ftailwind-css",{"id":48,"headline":49,"body":50},"nothing-to-undo","Nothing you have to undo.","No reset to override, no font to remove, no `!important` to beat, no initialiser to call after rendering, no guard for server rendering. ESM only, nothing on `window`.",{"id":52,"headline":53,"body":54,"cta":55},"migration","Coming from 0.x?","1.0 is a rewrite: every class is prefixed, styles and colours are separate classes, and the browser replaced the JavaScript. The guide lists every change.",{"label":56,"to":17},"Read the migration guide",{"id":58,"headline":59,"body":60,"cta":61},"install","Install it your way.","A package for npm, yarn, pnpm or bun, or two tags from a CDN. Import everything or only the components you use.",{"label":13,"to":14},"landing","Components the browser already knows how to run.","QsxvMnCQ8bgawTVgX6YLkvZoqMKaQbFt0j1urNnrKQw",{"id":66,"title":67,"body":68,"changed":434,"description":435,"extension":436,"from":434,"meta":437,"navigation":141,"path":438,"seo":439,"since":434,"stem":440,"tags":441,"to":434,"__hash__":443},"docs_v1\u002Fdocs\u002Fv1\u002F01.getting-started\u002F02.typescript.md","TypeScript",{"type":69,"value":70,"toc":430},"minimark",[71,76,203,207,211,229,232,405,408,426],[72,73,75],"h2",{"id":74},"color-mode","Color mode",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-ts shiki shiki-themes perfectui-site","import { setMode, getMode, type Mode } from \"@chrissgon\u002Fperfectui\u002Fmode\";\n\nconst mode: Mode = getMode(); \u002F\u002F \"system\" | \"light\" | \"dark\"\n\nsetMode(\"dark\");\nsetMode(); \u002F\u002F back to the system preference\n","ts","",[84,85,86,136,143,169,174,192],"code",{"__ignoreMap":82},[87,88,91,95,99,103,106,109,111,114,117,120,123,126,130,133],"span",{"class":89,"line":90},"line",1,[87,92,94],{"class":93},"sz5At","import",[87,96,98],{"class":97},"s8qk9"," {",[87,100,102],{"class":101},"stV6K"," setMode",[87,104,105],{"class":97},",",[87,107,108],{"class":101}," getMode",[87,110,105],{"class":97},[87,112,113],{"class":93}," type",[87,115,116],{"class":101}," Mode ",[87,118,119],{"class":97},"}",[87,121,122],{"class":93}," from",[87,124,125],{"class":97}," \"",[87,127,129],{"class":128},"s8AH5","@chrissgon\u002Fperfectui\u002Fmode",[87,131,132],{"class":97},"\"",[87,134,135],{"class":97},";\n",[87,137,139],{"class":89,"line":138},2,[87,140,142],{"emptyLinePlaceholder":141},true,"\n",[87,144,146,149,152,155,157,160,163,166],{"class":89,"line":145},3,[87,147,148],{"class":93},"const",[87,150,151],{"class":101}," mode",[87,153,154],{"class":93},":",[87,156,116],{"class":101},[87,158,159],{"class":93},"=",[87,161,162],{"class":101}," getMode()",[87,164,165],{"class":97},";",[87,167,168],{"class":97}," \u002F\u002F \"system\" | \"light\" | \"dark\"\n",[87,170,172],{"class":89,"line":171},4,[87,173,142],{"emptyLinePlaceholder":141},[87,175,177,180,182,185,187,190],{"class":89,"line":176},5,[87,178,179],{"class":101},"setMode(",[87,181,132],{"class":97},[87,183,184],{"class":128},"dark",[87,186,132],{"class":97},[87,188,189],{"class":101},")",[87,191,135],{"class":97},[87,193,195,198,200],{"class":89,"line":194},6,[87,196,197],{"class":101},"setMode()",[87,199,165],{"class":97},[87,201,202],{"class":97}," \u002F\u002F back to the system preference\n",[72,204,206],{"id":205},"the-fallback-loader","The fallback loader",[208,209,210],"p",{},"Importing the loader for its side effect is all most projects need:",[77,212,214],{"className":79,"code":213,"language":81,"meta":82,"style":82},"import \"@chrissgon\u002Fperfectui\";\n",[84,215,216],{"__ignoreMap":82},[87,217,218,220,222,225,227],{"class":89,"line":90},[87,219,94],{"class":93},[87,221,125],{"class":97},[87,223,224],{"class":128},"@chrissgon\u002Fperfectui",[87,226,132],{"class":97},[87,228,135],{"class":97},[208,230,231],{},"The registry is exported if you want to inspect what your browser is missing, or to drive the loading yourself:",[77,233,235],{"className":79,"code":234,"language":81,"meta":82,"style":82},"import { features, loadFallbacks, type Feature } from \"@chrissgon\u002Fperfectui\";\n\nfor (const feature of features) {\n  console.log(feature.name, feature.supported());\n}\n\n\u002F\u002F Force every fallback, which is useful when testing the non-native path.\nloadFallbacks(\n  features.map((feature) => ({ ...feature, supported: () => false }))\n);\n",[84,236,237,270,274,296,324,329,333,339,345,398],{"__ignoreMap":82},[87,238,239,241,243,246,248,251,253,255,258,260,262,264,266,268],{"class":89,"line":90},[87,240,94],{"class":93},[87,242,98],{"class":97},[87,244,245],{"class":101}," features",[87,247,105],{"class":97},[87,249,250],{"class":101}," loadFallbacks",[87,252,105],{"class":97},[87,254,113],{"class":93},[87,256,257],{"class":101}," Feature ",[87,259,119],{"class":97},[87,261,122],{"class":93},[87,263,125],{"class":97},[87,265,224],{"class":128},[87,267,132],{"class":97},[87,269,135],{"class":97},[87,271,272],{"class":89,"line":138},[87,273,142],{"emptyLinePlaceholder":141},[87,275,276,279,282,284,287,290,293],{"class":89,"line":145},[87,277,278],{"class":93},"for",[87,280,281],{"class":101}," (",[87,283,148],{"class":93},[87,285,286],{"class":101}," feature ",[87,288,289],{"class":93},"of",[87,291,292],{"class":101}," features) ",[87,294,295],{"class":97},"{\n",[87,297,298,301,304,307,309,312,314,317,319,322],{"class":89,"line":171},[87,299,300],{"class":101},"  console",[87,302,303],{"class":97},".",[87,305,306],{"class":101},"log(feature",[87,308,303],{"class":97},[87,310,311],{"class":101},"name",[87,313,105],{"class":97},[87,315,316],{"class":101}," feature",[87,318,303],{"class":97},[87,320,321],{"class":101},"supported())",[87,323,135],{"class":97},[87,325,326],{"class":89,"line":176},[87,327,328],{"class":97},"}\n",[87,330,331],{"class":89,"line":194},[87,332,142],{"emptyLinePlaceholder":141},[87,334,336],{"class":89,"line":335},7,[87,337,338],{"class":97},"\u002F\u002F Force every fallback, which is useful when testing the non-native path.\n",[87,340,342],{"class":89,"line":341},8,[87,343,344],{"class":101},"loadFallbacks(\n",[87,346,348,351,353,356,359,363,365,368,370,373,376,378,380,383,385,388,390,393,395],{"class":89,"line":347},9,[87,349,350],{"class":101},"  features",[87,352,303],{"class":97},[87,354,355],{"class":101},"map(",[87,357,358],{"class":97},"(",[87,360,362],{"class":361},"sz6eq","feature",[87,364,189],{"class":97},[87,366,367],{"class":93}," =>",[87,369,281],{"class":101},[87,371,372],{"class":97},"{",[87,374,375],{"class":93}," ...",[87,377,362],{"class":101},[87,379,105],{"class":97},[87,381,382],{"class":101}," supported",[87,384,154],{"class":97},[87,386,387],{"class":97}," ()",[87,389,367],{"class":93},[87,391,392],{"class":101}," false ",[87,394,119],{"class":97},[87,396,397],{"class":101},"))\n",[87,399,401,403],{"class":89,"line":400},10,[87,402,189],{"class":101},[87,404,135],{"class":97},[208,406,407],{},"A single fallback can also be imported directly, if you know you need it:",[77,409,411],{"className":79,"code":410,"language":81,"meta":82,"style":82},"import \"@chrissgon\u002Fperfectui\u002Ffallbacks\u002Finterest-for\";\n",[84,412,413],{"__ignoreMap":82},[87,414,415,417,419,422,424],{"class":89,"line":90},[87,416,94],{"class":93},[87,418,125],{"class":97},[87,420,421],{"class":128},"@chrissgon\u002Fperfectui\u002Ffallbacks\u002Finterest-for",[87,423,132],{"class":97},[87,425,135],{"class":97},[427,428,429],"style",{},"html pre.shiki code .sz5At, html code.shiki .sz5At{--shiki-default:var(--site-code-tag)}html pre.shiki code .s8qk9, html code.shiki .s8qk9{--shiki-default:var(--site-code-punct)}html pre.shiki code .stV6K, html code.shiki .stV6K{--shiki-default:var(--site-code-text)}html pre.shiki code .s8AH5, html code.shiki .s8AH5{--shiki-default:var(--site-code-value)}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sz6eq, html code.shiki .sz6eq{--shiki-default:var(--site-code-attr)}",{"title":82,"searchDepth":138,"depth":138,"links":431},[432,433],{"id":74,"depth":138,"text":75},{"id":205,"depth":138,"text":206},null,"Perfect UI ships its own type declarations. There is nothing to install.","md",{},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript",{"title":67,"description":435},"docs\u002Fv1\u002F01.getting-started\u002F02.typescript",[442],"guide","ooGkvsRan2UNzj9frltzie_QYkdrP7Bdd0p_JI6waXc",[445],{"title":446,"path":14,"stem":447,"children":448,"page":475},"Docs","docs",[449],{"title":450,"path":451,"stem":452,"children":453,"page":475},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[454,476,489,502,551],{"title":455,"path":456,"stem":457,"children":458,"page":475},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[459,463,464,468,471],{"title":460,"path":461,"stem":462},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":67,"path":438,"stem":440},{"title":465,"path":466,"stem":467},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":469,"stem":470},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":472,"path":473,"stem":474},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":477,"path":478,"stem":479,"children":480,"page":475},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[481,485],{"title":482,"path":483,"stem":484},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":486,"path":487,"stem":488},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":490,"path":491,"stem":492,"children":493,"page":475},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[494,498],{"title":495,"path":496,"stem":497},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":499,"path":500,"stem":501},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":503,"path":504,"stem":505,"children":506,"page":475},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[507,511,515,519,523,527,531,535,539,543,547],{"title":508,"path":509,"stem":510},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":512,"path":513,"stem":514},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":516,"path":517,"stem":518},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":520,"path":521,"stem":522},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":524,"path":525,"stem":526},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":528,"path":529,"stem":530},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":532,"path":533,"stem":534},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":536,"path":537,"stem":538},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":540,"path":541,"stem":542},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":544,"path":545,"stem":546},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":548,"path":549,"stem":550},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":552,"path":553,"stem":554,"children":555,"page":475},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[556,560,564,568,572,576,580,584],{"title":557,"path":558,"stem":559},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":561,"path":562,"stem":563},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":565,"path":566,"stem":567},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":569,"path":570,"stem":571},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":573,"path":574,"stem":575},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":577,"path":578,"stem":579},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":581,"path":582,"stem":583},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":585,"path":586,"stem":587},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790354564582]