[{"data":1,"prerenderedAt":779},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard":65,"nav:v1":635},{"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":623,"description":624,"extension":625,"from":623,"meta":626,"navigation":627,"path":628,"seo":629,"since":623,"stem":630,"tags":631,"to":623,"__hash__":634},"docs_v1\u002Fdocs\u002Fv1\u002F04.components\u002F04.card.md","Card",{"type":69,"value":70,"toc":618},"minimark",[71,207,254,259,265,449,453,456,517,521,524,614],[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","\u003Cdiv class=\"pui-card\">\n  \u003Cdiv class=\"pui-card-header\">Card header\u003C\u002Fdiv>\n  \u003Cdiv class=\"pui-card-content\">\n    \u003Cspan>Content goes here.\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[82,83,84,116,149,169,188,198],"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","div",[85,98,100],{"class":99},"sz6eq"," class",[85,102,103],{"class":91},"=",[85,105,106],{"class":91},"\"",[85,108,110],{"class":109},"s8AH5","pui-card",[85,112,106],{"class":91},[85,114,115],{"class":91},">\n",[85,117,119,122,124,126,128,130,133,135,138,142,145,147],{"class":87,"line":118},2,[85,120,121],{"class":91},"  \u003C",[85,123,96],{"class":95},[85,125,100],{"class":99},[85,127,103],{"class":91},[85,129,106],{"class":91},[85,131,132],{"class":109},"pui-card-header",[85,134,106],{"class":91},[85,136,137],{"class":91},">",[85,139,141],{"class":140},"stV6K","Card header",[85,143,144],{"class":91},"\u003C\u002F",[85,146,96],{"class":95},[85,148,115],{"class":91},[85,150,152,154,156,158,160,162,165,167],{"class":87,"line":151},3,[85,153,121],{"class":91},[85,155,96],{"class":95},[85,157,100],{"class":99},[85,159,103],{"class":91},[85,161,106],{"class":91},[85,163,164],{"class":109},"pui-card-content",[85,166,106],{"class":91},[85,168,115],{"class":91},[85,170,172,175,177,179,182,184,186],{"class":87,"line":171},4,[85,173,174],{"class":91},"    \u003C",[85,176,85],{"class":95},[85,178,137],{"class":91},[85,180,181],{"class":140},"Content goes here.",[85,183,144],{"class":91},[85,185,85],{"class":95},[85,187,115],{"class":91},[85,189,191,194,196],{"class":87,"line":190},5,[85,192,193],{"class":91},"  \u003C\u002F",[85,195,96],{"class":95},[85,197,115],{"class":91},[85,199,201,203,205],{"class":87,"line":200},6,[85,202,144],{"class":91},[85,204,96],{"class":95},[85,206,115],{"class":91},[208,209,210,223],"table",{},[211,212,213],"thead",{},[214,215,216,220],"tr",{},[217,218,219],"th",{},"Class",[217,221,222],{},"Role",[224,225,226,236,245],"tbody",{},[214,227,228,233],{},[229,230,231],"td",{},[82,232,110],{},[229,234,235],{},"the frame: border, radius, clipping",[214,237,238,242],{},[229,239,240],{},[82,241,132],{},[229,243,244],{},"a muted band at the top",[214,246,247,251],{},[229,248,249],{},[82,250,164],{},[229,252,253],{},"the body, a grid so children space themselves",[255,256,258],"h2",{"id":257},"content-spacing","Content spacing",[260,261,262,264],"p",{},[82,263,164],{}," is a grid with a gap, so children do not need margins:",[72,266,267],{},[75,268,270],{"className":77,"code":269,"language":79,"meta":80,"style":80},"\u003Cdiv class=\"pui-card\">\n  \u003Cdiv class=\"pui-card-content\">\n    \u003Ch3>Delete project\u003C\u002Fh3>\n    \u003Cp>This cannot be undone.\u003C\u002Fp>\n    \u003Cdiv class=\"pui-group-row\">\n      \u003Cbutton class=\"pui-btn pui-outline pui-surface\">Cancel\u003C\u002Fbutton>\n      \u003Cbutton class=\"pui-btn pui-solid pui-error\">Delete\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[82,271,272,290,308,326,343,362,392,421,431,440],{"__ignoreMap":80},[85,273,274,276,278,280,282,284,286,288],{"class":87,"line":88},[85,275,92],{"class":91},[85,277,96],{"class":95},[85,279,100],{"class":99},[85,281,103],{"class":91},[85,283,106],{"class":91},[85,285,110],{"class":109},[85,287,106],{"class":91},[85,289,115],{"class":91},[85,291,292,294,296,298,300,302,304,306],{"class":87,"line":118},[85,293,121],{"class":91},[85,295,96],{"class":95},[85,297,100],{"class":99},[85,299,103],{"class":91},[85,301,106],{"class":91},[85,303,164],{"class":109},[85,305,106],{"class":91},[85,307,115],{"class":91},[85,309,310,312,315,317,320,322,324],{"class":87,"line":151},[85,311,174],{"class":91},[85,313,314],{"class":95},"h3",[85,316,137],{"class":91},[85,318,319],{"class":140},"Delete project",[85,321,144],{"class":91},[85,323,314],{"class":95},[85,325,115],{"class":91},[85,327,328,330,332,334,337,339,341],{"class":87,"line":171},[85,329,174],{"class":91},[85,331,260],{"class":95},[85,333,137],{"class":91},[85,335,336],{"class":140},"This cannot be undone.",[85,338,144],{"class":91},[85,340,260],{"class":95},[85,342,115],{"class":91},[85,344,345,347,349,351,353,355,358,360],{"class":87,"line":190},[85,346,174],{"class":91},[85,348,96],{"class":95},[85,350,100],{"class":99},[85,352,103],{"class":91},[85,354,106],{"class":91},[85,356,357],{"class":109},"pui-group-row",[85,359,106],{"class":91},[85,361,115],{"class":91},[85,363,364,367,370,372,374,376,379,381,383,386,388,390],{"class":87,"line":200},[85,365,366],{"class":91},"      \u003C",[85,368,369],{"class":95},"button",[85,371,100],{"class":99},[85,373,103],{"class":91},[85,375,106],{"class":91},[85,377,378],{"class":109},"pui-btn pui-outline pui-surface",[85,380,106],{"class":91},[85,382,137],{"class":91},[85,384,385],{"class":140},"Cancel",[85,387,144],{"class":91},[85,389,369],{"class":95},[85,391,115],{"class":91},[85,393,395,397,399,401,403,405,408,410,412,415,417,419],{"class":87,"line":394},7,[85,396,366],{"class":91},[85,398,369],{"class":95},[85,400,100],{"class":99},[85,402,103],{"class":91},[85,404,106],{"class":91},[85,406,407],{"class":109},"pui-btn pui-solid pui-error",[85,409,106],{"class":91},[85,411,137],{"class":91},[85,413,414],{"class":140},"Delete",[85,416,144],{"class":91},[85,418,369],{"class":95},[85,420,115],{"class":91},[85,422,424,427,429],{"class":87,"line":423},8,[85,425,426],{"class":91},"    \u003C\u002F",[85,428,96],{"class":95},[85,430,115],{"class":91},[85,432,434,436,438],{"class":87,"line":433},9,[85,435,193],{"class":91},[85,437,96],{"class":95},[85,439,115],{"class":91},[85,441,443,445,447],{"class":87,"line":442},10,[85,444,144],{"class":91},[85,446,96],{"class":95},[85,448,115],{"class":91},[255,450,452],{"id":451},"recoloring-a-card","Recoloring a card",[260,454,455],{},"A style class still wins over the card's own surface:",[72,457,458],{},[75,459,461],{"className":77,"code":460,"language":79,"meta":80,"style":80},"\u003Cdiv class=\"pui-card pui-soft pui-warn\">\n  \u003Cdiv class=\"pui-card-content\">Careful with this one.\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[82,462,463,482,509],{"__ignoreMap":80},[85,464,465,467,469,471,473,475,478,480],{"class":87,"line":88},[85,466,92],{"class":91},[85,468,96],{"class":95},[85,470,100],{"class":99},[85,472,103],{"class":91},[85,474,106],{"class":91},[85,476,477],{"class":109},"pui-card pui-soft pui-warn",[85,479,106],{"class":91},[85,481,115],{"class":91},[85,483,484,486,488,490,492,494,496,498,500,503,505,507],{"class":87,"line":118},[85,485,121],{"class":91},[85,487,96],{"class":95},[85,489,100],{"class":99},[85,491,103],{"class":91},[85,493,106],{"class":91},[85,495,164],{"class":109},[85,497,106],{"class":91},[85,499,137],{"class":91},[85,501,502],{"class":140},"Careful with this one.",[85,504,144],{"class":91},[85,506,96],{"class":95},[85,508,115],{"class":91},[85,510,511,513,515],{"class":87,"line":151},[85,512,144],{"class":91},[85,514,96],{"class":95},[85,516,115],{"class":91},[255,518,520],{"id":519},"a-card-as-a-container","A card as a container",[260,522,523],{},"A table sits flush inside a card: the card draws the outer border, the table draws the rules between rows.",[75,525,527],{"className":77,"code":526,"language":79,"meta":80,"style":80},"\u003Cdiv class=\"pui-card\">\n  \u003Cdiv class=\"pui-card-header\">Users\u003C\u002Fdiv>\n  \u003Ctable class=\"pui-table pui-striped\">\n    \u003C!-- ... -->\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n",[82,528,529,547,574,593,598,606],{"__ignoreMap":80},[85,530,531,533,535,537,539,541,543,545],{"class":87,"line":88},[85,532,92],{"class":91},[85,534,96],{"class":95},[85,536,100],{"class":99},[85,538,103],{"class":91},[85,540,106],{"class":91},[85,542,110],{"class":109},[85,544,106],{"class":91},[85,546,115],{"class":91},[85,548,549,551,553,555,557,559,561,563,565,568,570,572],{"class":87,"line":118},[85,550,121],{"class":91},[85,552,96],{"class":95},[85,554,100],{"class":99},[85,556,103],{"class":91},[85,558,106],{"class":91},[85,560,132],{"class":109},[85,562,106],{"class":91},[85,564,137],{"class":91},[85,566,567],{"class":140},"Users",[85,569,144],{"class":91},[85,571,96],{"class":95},[85,573,115],{"class":91},[85,575,576,578,580,582,584,586,589,591],{"class":87,"line":151},[85,577,121],{"class":91},[85,579,208],{"class":95},[85,581,100],{"class":99},[85,583,103],{"class":91},[85,585,106],{"class":91},[85,587,588],{"class":109},"pui-table pui-striped",[85,590,106],{"class":91},[85,592,115],{"class":91},[85,594,595],{"class":87,"line":171},[85,596,597],{"class":91},"    \u003C!-- ... -->\n",[85,599,600,602,604],{"class":87,"line":190},[85,601,193],{"class":91},[85,603,208],{"class":95},[85,605,115],{"class":91},[85,607,608,610,612],{"class":87,"line":200},[85,609,144],{"class":91},[85,611,96],{"class":95},[85,613,115],{"class":91},[615,616,617],"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":619},[620,621,622],{"id":257,"depth":118,"text":258},{"id":451,"depth":118,"text":452},{"id":519,"depth":118,"text":520},null,"A container with a border and a rounded frame. A card is a surface: it already looks right with no style or color class.","md",{},true,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard",{"title":67,"description":624},"docs\u002Fv1\u002F04.components\u002F04.card",[632,633],"component","card","szaYBiHJRSy5JrNDKR3oI5AwyESdBJigVJcve26iIHo",[636],{"title":637,"path":14,"stem":638,"children":639,"page":669},"Docs","docs",[640],{"title":641,"path":642,"stem":643,"children":644,"page":669},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[645,670,683,696,742],{"title":646,"path":647,"stem":648,"children":649,"page":669},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[650,654,658,662,665],{"title":651,"path":652,"stem":653},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":655,"path":656,"stem":657},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":659,"path":660,"stem":661},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":663,"stem":664},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":666,"path":667,"stem":668},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":671,"path":672,"stem":673,"children":674,"page":669},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[675,679],{"title":676,"path":677,"stem":678},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":680,"path":681,"stem":682},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":684,"path":685,"stem":686,"children":687,"page":669},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[688,692],{"title":689,"path":690,"stem":691},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":693,"path":694,"stem":695},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":697,"path":698,"stem":699,"children":700,"page":669},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[701,705,709,713,714,718,722,726,730,734,738],{"title":702,"path":703,"stem":704},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":706,"path":707,"stem":708},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":710,"path":711,"stem":712},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":67,"path":628,"stem":630},{"title":715,"path":716,"stem":717},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":719,"path":720,"stem":721},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":723,"path":724,"stem":725},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":727,"path":728,"stem":729},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":731,"path":732,"stem":733},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":735,"path":736,"stem":737},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":739,"path":740,"stem":741},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":743,"path":744,"stem":745,"children":746,"page":669},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[747,751,755,759,763,767,771,775],{"title":748,"path":749,"stem":750},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":752,"path":753,"stem":754},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":756,"path":757,"stem":758},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":760,"path":761,"stem":762},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":764,"path":765,"stem":766},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":768,"path":769,"stem":770},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":772,"path":773,"stem":774},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":776,"path":777,"stem":778},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790354564737]