[{"data":1,"prerenderedAt":454},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat":65,"nav:v1":310},{"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":299,"description":300,"extension":301,"from":299,"meta":302,"navigation":199,"path":303,"seo":304,"since":299,"stem":305,"tags":306,"to":299,"__hash__":309},"docs_v1\u002Fdocs\u002Fv1\u002F03.general\u002F02.float.md","Float",{"type":69,"value":70,"toc":296},"minimark",[71,133,137,142,145,292],[72,73,74],"example",{},[75,76,81],"pre",{"className":77,"code":78,"language":79,"meta":80,"style":80},"language-html shiki shiki-themes perfectui-site","\u003Cbutton class=\"pui-btn pui-solid pui-theme pui-rounded-full pui-float\">\n  New post\n\u003C\u002Fbutton>\n","html","",[82,83,84,116,123],"code",{"__ignoreMap":80},[85,86,89,93,97,101,104,107,111,113],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"s8qk9","\u003C",[85,94,96],{"class":95},"sz5At","button",[85,98,100],{"class":99},"sz6eq"," class",[85,102,103],{"class":91},"=",[85,105,106],{"class":91},"\"",[85,108,110],{"class":109},"s8AH5","pui-btn pui-solid pui-theme pui-rounded-full pui-float",[85,112,106],{"class":91},[85,114,115],{"class":91},">\n",[85,117,119],{"class":87,"line":118},2,[85,120,122],{"class":121},"stV6K","  New post\n",[85,124,126,129,131],{"class":87,"line":125},3,[85,127,128],{"class":91},"\u003C\u002F",[85,130,96],{"class":95},[85,132,115],{"class":91},[134,135,136],"p",{},"The default corner is the bottom start one — bottom left in a left-to-right page, bottom right in a right-to-left one.",[138,139,141],"h2",{"id":140},"the-other-corners","The other corners",[134,143,144],{},"There is no modifier class, because a corner is one declaration of your own CSS:",[75,146,150],{"className":147,"code":148,"language":149,"meta":80,"style":80},"language-css shiki shiki-themes perfectui-site","\u002F* bottom end *\u002F\n.pui-float {\n  inset-inline: auto 1.5rem;\n}\n\n\u002F* top start *\u002F\n.pui-float {\n  inset-block: 1.5rem auto;\n}\n\n\u002F* top end *\u002F\n.pui-float {\n  inset-block: 1.5rem auto;\n  inset-inline: auto 1.5rem;\n}\n","css",[82,151,152,157,168,188,194,201,207,216,232,237,242,248,257,272,287],{"__ignoreMap":80},[85,153,154],{"class":87,"line":88},[85,155,156],{"class":91},"\u002F* bottom end *\u002F\n",[85,158,159,162,165],{"class":87,"line":118},[85,160,161],{"class":91},".",[85,163,164],{"class":99},"pui-float",[85,166,167],{"class":91}," {\n",[85,169,170,173,176,179,182,185],{"class":87,"line":125},[85,171,172],{"class":99},"  inset-inline",[85,174,175],{"class":91},":",[85,177,178],{"class":109}," auto",[85,180,181],{"class":109}," 1.5",[85,183,184],{"class":95},"rem",[85,186,187],{"class":91},";\n",[85,189,191],{"class":87,"line":190},4,[85,192,193],{"class":91},"}\n",[85,195,197],{"class":87,"line":196},5,[85,198,200],{"emptyLinePlaceholder":199},true,"\n",[85,202,204],{"class":87,"line":203},6,[85,205,206],{"class":91},"\u002F* top start *\u002F\n",[85,208,210,212,214],{"class":87,"line":209},7,[85,211,161],{"class":91},[85,213,164],{"class":99},[85,215,167],{"class":91},[85,217,219,222,224,226,228,230],{"class":87,"line":218},8,[85,220,221],{"class":99},"  inset-block",[85,223,175],{"class":91},[85,225,181],{"class":109},[85,227,184],{"class":95},[85,229,178],{"class":109},[85,231,187],{"class":91},[85,233,235],{"class":87,"line":234},9,[85,236,193],{"class":91},[85,238,240],{"class":87,"line":239},10,[85,241,200],{"emptyLinePlaceholder":199},[85,243,245],{"class":87,"line":244},11,[85,246,247],{"class":91},"\u002F* top end *\u002F\n",[85,249,251,253,255],{"class":87,"line":250},12,[85,252,161],{"class":91},[85,254,164],{"class":99},[85,256,167],{"class":91},[85,258,260,262,264,266,268,270],{"class":87,"line":259},13,[85,261,221],{"class":99},[85,263,175],{"class":91},[85,265,181],{"class":109},[85,267,184],{"class":95},[85,269,178],{"class":109},[85,271,187],{"class":91},[85,273,275,277,279,281,283,285],{"class":87,"line":274},14,[85,276,172],{"class":99},[85,278,175],{"class":91},[85,280,178],{"class":109},[85,282,181],{"class":109},[85,284,184],{"class":95},[85,286,187],{"class":91},[85,288,290],{"class":87,"line":289},15,[85,291,193],{"class":91},[293,294,295],"style",{},"html pre.shiki code .s8qk9, html code.shiki .s8qk9{--shiki-default:var(--site-code-punct)}html pre.shiki code .sz5At, html code.shiki .sz5At{--shiki-default:var(--site-code-tag)}html pre.shiki code .sz6eq, html code.shiki .sz6eq{--shiki-default:var(--site-code-attr)}html pre.shiki code .s8AH5, html code.shiki .s8AH5{--shiki-default:var(--site-code-value)}html pre.shiki code .stV6K, html code.shiki .stV6K{--shiki-default:var(--site-code-text)}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);}",{"title":80,"searchDepth":118,"depth":118,"links":297},[298],{"id":140,"depth":118,"text":141},null,"Pins an element to a corner of the viewport, for a floating action button or a persistent shortcut.","md",{},"\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat",{"title":67,"description":300},"docs\u002Fv1\u002F03.general\u002F02.float",[307,308],"layout","float","p1sbDi_RtiwbaSgLdOcyKW4XEcdSlq1L1Ykjr_n7WWA",[311],{"title":312,"path":14,"stem":313,"children":314,"page":344},"Docs","docs",[315],{"title":316,"path":317,"stem":318,"children":319,"page":344},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[320,345,358,368,417],{"title":321,"path":322,"stem":323,"children":324,"page":344},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[325,329,333,337,340],{"title":326,"path":327,"stem":328},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":330,"path":331,"stem":332},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":334,"path":335,"stem":336},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":338,"stem":339},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":341,"path":342,"stem":343},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":346,"path":347,"stem":348,"children":349,"page":344},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[350,354],{"title":351,"path":352,"stem":353},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":355,"path":356,"stem":357},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":359,"path":360,"stem":361,"children":362,"page":344},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[363,367],{"title":364,"path":365,"stem":366},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":67,"path":303,"stem":305},{"title":369,"path":370,"stem":371,"children":372,"page":344},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[373,377,381,385,389,393,397,401,405,409,413],{"title":374,"path":375,"stem":376},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":378,"path":379,"stem":380},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":382,"path":383,"stem":384},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":386,"path":387,"stem":388},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":390,"path":391,"stem":392},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":394,"path":395,"stem":396},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":398,"path":399,"stem":400},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":402,"path":403,"stem":404},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":406,"path":407,"stem":408},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":410,"path":411,"stem":412},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":414,"path":415,"stem":416},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":418,"path":419,"stem":420,"children":421,"page":344},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[422,426,430,434,438,442,446,450],{"title":423,"path":424,"stem":425},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":427,"path":428,"stem":429},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":431,"path":432,"stem":433},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":435,"path":436,"stem":437},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":439,"path":440,"stem":441},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":443,"path":444,"stem":445},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":447,"path":448,"stem":449},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":451,"path":452,"stem":453},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790376112114]