[{"data":1,"prerenderedAt":762},["ShallowReactive",2],{"navigation_docs":3,"shadcn-rules-index":44},[4,8,12,16,20,24,28,32,36,40],{"title":5,"path":6,"stem":7},"CLI","\u002Fcli","1.cli",{"title":9,"path":10,"stem":11},"Nuxt","\u002Fnuxt","2.nuxt",{"title":13,"path":14,"stem":15},"Vue","\u002Fvue","3.vue",{"title":17,"path":18,"stem":19},"Vite","\u002Fvite","4.vite",{"title":21,"path":22,"stem":23},"Nitro","\u002Fnitro","5.nitro",{"title":25,"path":26,"stem":27},"TypeScript","\u002Ftypescript","6.typescript",{"title":29,"path":30,"stem":31},"shadcn","\u002Fshadcn","7.shadcn",{"title":33,"path":34,"stem":35},"Package","\u002Fpackage","8.package",{"title":37,"path":38,"stem":39},"Extending Doctor","\u002Fextending","9.extending",{"title":41,"path":42,"stem":43},"Pinia","\u002Fpinia","9.pinia",[45,197,298,399,521,622],{"id":46,"title":47,"body":48,"category":54,"description":187,"diagnosticCodes":188,"docsUrl":56,"extension":189,"fix":57,"framework":29,"meta":190,"navigation":191,"pack":58,"path":193,"recommendedReplacement":120,"ruleId":59,"seo":194,"severity":60,"source":61,"sourceUrl":62,"stem":195,"why":113,"__hash__":196},"rules\u002Fshadcn\u002Frules\u002Fui\u002Fno-arbitrary-values.md","Avoid arbitrary Tailwind values",{"type":49,"value":50,"toc":176},"minimark",[51,63,68,106,110,114,118,121,125,137,141,146,149,160,163,172],[52,53],"rule-metadata",{"category":54,"diagnosticCodes":55,"docsUrl":56,"fix":57,"pack":58,"ruleId":59,"severity":60,"source":61,"sourceUrl":62},"ui","SHAD0003","https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Flint\u002Fblob\u002Fmain\u002Fdocs\u002Frules\u002Fno-arbitrary-values.md","suggestion","vite-doctor\u002Fshadcn","shadcn\u002Fno-arbitrary-values","warn","src\u002Frule-packs\u002Fshadcn\u002Frules\u002Findex.ts","https:\u002F\u002Fgithub.com\u002Fonmax\u002Fvite-doctor\u002Fblob\u002Fmain\u002Fsrc\u002Frule-packs\u002Fshadcn\u002Frules\u002Findex.ts",[64,65,67],"h2",{"id":66},"run-this-rule","Run this rule",[69,70,75],"pre",{"className":71,"code":72,"language":73,"meta":74,"style":74},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm vite-doctor . --extends shadcn\u002Fstrict --rules shadcn\u002Fno-arbitrary-values\n","bash","",[76,77,78],"code",{"__ignoreMap":74},[79,80,83,87,91,94,97,100,103],"span",{"class":81,"line":82},"line",1,[79,84,86],{"class":85},"sBMFI","pnpm",[79,88,90],{"class":89},"sfazB"," vite-doctor",[79,92,93],{"class":89}," .",[79,95,96],{"class":89}," --extends",[79,98,99],{"class":89}," shadcn\u002Fstrict",[79,101,102],{"class":89}," --rules",[79,104,105],{"class":89}," shadcn\u002Fno-arbitrary-values\n",[64,107,109],{"id":108},"why-it-matters","Why it matters",[111,112,113],"p",{},"Arbitrary utility values bypass theme tokens and scale values, making appearance harder to change consistently. Exceptions follow the configured class policy.",[64,115,117],{"id":116},"recommended-fix","Recommended fix",[111,119,120],{},"Choose an existing theme token or scale utility that matches the intended design. Review suggested replacements before applying them.",[64,122,124],{"id":123},"useful-links","Useful links",[126,127,128],"ul",{},[129,130,131],"li",{},[132,133,136],"a",{"href":56,"rel":134},[135],"nofollow","Rule reference",[64,138,140],{"id":139},"example","Example",[142,143,145],"h3",{"id":144},"use-the-spacing-scale","Use the spacing scale",[111,147,148],{},"Before",[69,150,154],{"className":151,"code":152,"language":153,"meta":74,"style":74},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv className=\"p-[16px]\">Account settings\u003C\u002Fdiv>\n","tsx",[76,155,156],{"__ignoreMap":74},[79,157,158],{"class":81,"line":82},[79,159,152],{},[111,161,162],{},"After",[69,164,166],{"className":151,"code":165,"language":153,"meta":74,"style":74},"\u003Cdiv className=\"p-4\">Account settings\u003C\u002Fdiv>\n",[76,167,168],{"__ignoreMap":74},[79,169,170],{"class":81,"line":82},[79,171,165],{},[173,174,175],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":74,"searchDepth":177,"depth":177,"links":178},2,[179,180,181,182,183],{"id":66,"depth":177,"text":67},{"id":108,"depth":177,"text":109},{"id":116,"depth":177,"text":117},{"id":123,"depth":177,"text":124},{"id":139,"depth":177,"text":140,"children":184},[185],{"id":144,"depth":186,"text":145},3,"Use the design system's existing values instead of arbitrary utilities.",[55],"md",{},{"title":192},"Arbitrary values","\u002Fshadcn\u002Frules\u002Fui\u002Fno-arbitrary-values",{"title":47,"description":187},"shadcn\u002Frules\u002Fui\u002Fno-arbitrary-values","lV_bWnBSmEhQ44n71A-jo9KXisSS4ZfT2QvSXv1GLJo",{"id":198,"title":199,"body":200,"category":54,"description":289,"diagnosticCodes":290,"docsUrl":205,"extension":189,"fix":57,"framework":29,"meta":291,"navigation":292,"pack":58,"path":294,"recommendedReplacement":240,"ruleId":206,"seo":295,"severity":60,"source":61,"sourceUrl":62,"stem":296,"why":235,"__hash__":297},"rules\u002Fshadcn\u002Frules\u002Fui\u002Fno-inline-styles.md","Avoid inline styles",{"type":49,"value":201,"toc":280},[202,207,209,231,233,236,238,241,243,250,252,256,258,267,269,278],[52,203],{"category":54,"diagnosticCodes":204,"docsUrl":205,"fix":57,"pack":58,"ruleId":206,"severity":60,"source":61,"sourceUrl":62},"SHAD0004","https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Flint\u002Fblob\u002Fmain\u002Fdocs\u002Frules\u002Fno-inline-styles.md","shadcn\u002Fno-inline-styles",[64,208,67],{"id":66},[69,210,212],{"className":71,"code":211,"language":73,"meta":74,"style":74},"pnpm vite-doctor . --extends shadcn\u002Fstrict --rules shadcn\u002Fno-inline-styles\n",[76,213,214],{"__ignoreMap":74},[79,215,216,218,220,222,224,226,228],{"class":81,"line":82},[79,217,86],{"class":85},[79,219,90],{"class":89},[79,221,93],{"class":89},[79,223,96],{"class":89},[79,225,99],{"class":89},[79,227,102],{"class":89},[79,229,230],{"class":89}," shadcn\u002Fno-inline-styles\n",[64,232,109],{"id":108},[111,234,235],{},"Ordinary inline properties bypass class-based styling. The Rule checks JSX elements, unreadable style objects, hardcoded colors in custom properties, and style elements.",[64,237,117],{"id":116},[111,239,240],{},"Use classes for styling. Pass dynamic values through CSS custom properties when needed, and use theme variables for colors.",[64,242,124],{"id":123},[126,244,245],{},[129,246,247],{},[132,248,136],{"href":205,"rel":249},[135],[64,251,140],{"id":139},[142,253,255],{"id":254},"replace-an-inline-color-with-a-theme-class","Replace an inline color with a theme class",[111,257,148],{},[69,259,261],{"className":151,"code":260,"language":153,"meta":74,"style":74},"\u003Cdiv style={{ color: \"var(--color-primary)\" }}>Account settings\u003C\u002Fdiv>\n",[76,262,263],{"__ignoreMap":74},[79,264,265],{"class":81,"line":82},[79,266,260],{},[111,268,162],{},[69,270,272],{"className":151,"code":271,"language":153,"meta":74,"style":74},"\u003Cdiv className=\"text-primary\">Account settings\u003C\u002Fdiv>\n",[76,273,274],{"__ignoreMap":74},[79,275,276],{"class":81,"line":82},[79,277,271],{},[173,279,175],{},{"title":74,"searchDepth":177,"depth":177,"links":281},[282,283,284,285,286],{"id":66,"depth":177,"text":67},{"id":108,"depth":177,"text":109},{"id":116,"depth":177,"text":117},{"id":123,"depth":177,"text":124},{"id":139,"depth":177,"text":140,"children":287},[288],{"id":254,"depth":186,"text":255},"Keep styling in the design system rather than component call sites.",[204],{},{"title":293},"Inline styles","\u002Fshadcn\u002Frules\u002Fui\u002Fno-inline-styles",{"title":199,"description":289},"shadcn\u002Frules\u002Fui\u002Fno-inline-styles","48IC-R9tn91Q14zLC4GcToipRpAL3ipISRnPatzrgOk",{"id":299,"title":300,"body":301,"category":54,"description":390,"diagnosticCodes":391,"docsUrl":306,"extension":189,"fix":57,"framework":29,"meta":392,"navigation":393,"pack":58,"path":395,"recommendedReplacement":341,"ruleId":307,"seo":396,"severity":60,"source":61,"sourceUrl":62,"stem":397,"why":336,"__hash__":398},"rules\u002Fshadcn\u002Frules\u002Fui\u002Fno-raw-colors.md","Use design-system color tokens",{"type":49,"value":302,"toc":381},[303,308,310,332,334,337,339,342,344,351,353,357,359,368,370,379],[52,304],{"category":54,"diagnosticCodes":305,"docsUrl":306,"fix":57,"pack":58,"ruleId":307,"severity":60,"source":61,"sourceUrl":62},"SHAD0002","https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Flint\u002Fblob\u002Fmain\u002Fdocs\u002Frules\u002Fno-raw-colors.md","shadcn\u002Fno-raw-colors",[64,309,67],{"id":66},[69,311,313],{"className":71,"code":312,"language":73,"meta":74,"style":74},"pnpm vite-doctor . --extends shadcn\u002Fstrict --rules shadcn\u002Fno-raw-colors\n",[76,314,315],{"__ignoreMap":74},[79,316,317,319,321,323,325,327,329],{"class":81,"line":82},[79,318,86],{"class":85},[79,320,90],{"class":89},[79,322,93],{"class":89},[79,324,96],{"class":89},[79,326,99],{"class":89},[79,328,102],{"class":89},[79,330,331],{"class":89}," shadcn\u002Fno-raw-colors\n",[64,333,109],{"id":108},[111,335,336],{},"Raw palette colors and literal SVG colors bypass the project's theme. Checking undeclared color tokens and suggesting theme replacements requires a readable theme; without one, those checks are unavailable.",[64,338,117],{"id":116},[111,340,341],{},"Use a color token declared by the theme. For SVG, use currentColor with a theme color class or reference a theme variable.",[64,343,124],{"id":123},[126,345,346],{},[129,347,348],{},[132,349,136],{"href":306,"rel":350},[135],[64,352,140],{"id":139},[142,354,356],{"id":355},"inherit-the-svg-color-without-theme-lookup","Inherit the SVG color without theme lookup",[111,358,148],{},[69,360,362],{"className":151,"code":361,"language":153,"meta":74,"style":74},"\u003Csvg>\u003Cpath fill=\"#ec4899\" d=\"M0 0h10v10H0z\" \u002F>\u003C\u002Fsvg>\n",[76,363,364],{"__ignoreMap":74},[79,365,366],{"class":81,"line":82},[79,367,361],{},[111,369,162],{},[69,371,373],{"className":151,"code":372,"language":153,"meta":74,"style":74},"\u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M0 0h10v10H0z\" \u002F>\u003C\u002Fsvg>\n",[76,374,375],{"__ignoreMap":74},[79,376,377],{"class":81,"line":82},[79,378,372],{},[173,380,175],{},{"title":74,"searchDepth":177,"depth":177,"links":382},[383,384,385,386,387],{"id":66,"depth":177,"text":67},{"id":108,"depth":177,"text":109},{"id":116,"depth":177,"text":117},{"id":123,"depth":177,"text":124},{"id":139,"depth":177,"text":140,"children":388},[389],{"id":355,"depth":186,"text":356},"Prefer theme colors over raw color values.",[305],{},{"title":394},"Color tokens","\u002Fshadcn\u002Frules\u002Fui\u002Fno-raw-colors",{"title":300,"description":390},"shadcn\u002Frules\u002Fui\u002Fno-raw-colors","NHHhUZSgh3bdKNtMqdLvZ92nBuYVPNx-0M1KbF0BQc0",{"id":400,"title":401,"body":402,"category":54,"description":512,"diagnosticCodes":513,"docsUrl":407,"extension":189,"fix":57,"framework":29,"meta":514,"navigation":515,"pack":58,"path":517,"recommendedReplacement":442,"ruleId":408,"seo":518,"severity":60,"source":61,"sourceUrl":62,"stem":519,"why":437,"__hash__":520},"rules\u002Fshadcn\u002Frules\u002Fui\u002Fno-restyle.md","Avoid restyling design-system components",{"type":49,"value":403,"toc":503},[404,409,411,433,435,438,440,443,445,452,454,458,460,481,483,501],[52,405],{"category":54,"diagnosticCodes":406,"docsUrl":407,"fix":57,"pack":58,"ruleId":408,"severity":60,"source":61,"sourceUrl":62},"SHAD0001","https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Flint\u002Fblob\u002Fmain\u002Fdocs\u002Frules\u002Fno-restyle.md","shadcn\u002Fno-restyle",[64,410,67],{"id":66},[69,412,414],{"className":71,"code":413,"language":73,"meta":74,"style":74},"pnpm vite-doctor . --extends shadcn\u002Fstrict --rules shadcn\u002Fno-restyle\n",[76,415,416],{"__ignoreMap":74},[79,417,418,420,422,424,426,428,430],{"class":81,"line":82},[79,419,86],{"class":85},[79,421,90],{"class":89},[79,423,93],{"class":89},[79,425,96],{"class":89},[79,427,99],{"class":89},[79,429,102],{"class":89},[79,431,432],{"class":89}," shadcn\u002Fno-restyle\n",[64,434,109],{"id":108},[111,436,437],{},"Appearance classes at a component call site can override the variants and sizes owned by the design system. The Rule checks recognized components against the configured class policy.",[64,439,117],{"id":116},[111,441,442],{},"Use the component's variants or sizes. Allow layout classes explicitly when the project's component policy permits them.",[64,444,124],{"id":123},[126,446,447],{},[129,448,449],{},[132,450,136],{"href":407,"rel":451},[135],[64,453,140],{"id":139},[142,455,457],{"id":456},"use-a-component-variant-for-appearance","Use a component variant for appearance",[111,459,148],{},[69,461,463],{"className":151,"code":462,"language":153,"meta":74,"style":74},"import { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\n\u003CButton className=\"bg-pink-500\">Delete account\u003C\u002FButton>\n",[76,464,465,470,476],{"__ignoreMap":74},[79,466,467],{"class":81,"line":82},[79,468,469],{},"import { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n",[79,471,472],{"class":81,"line":177},[79,473,475],{"emptyLinePlaceholder":474},true,"\n",[79,477,478],{"class":81,"line":186},[79,479,480],{},"\u003CButton className=\"bg-pink-500\">Delete account\u003C\u002FButton>\n",[111,482,162],{},[69,484,486],{"className":151,"code":485,"language":153,"meta":74,"style":74},"import { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\n\u003CButton variant=\"destructive\">Delete account\u003C\u002FButton>\n",[76,487,488,492,496],{"__ignoreMap":74},[79,489,490],{"class":81,"line":82},[79,491,469],{},[79,493,494],{"class":81,"line":177},[79,495,475],{"emptyLinePlaceholder":474},[79,497,498],{"class":81,"line":186},[79,499,500],{},"\u003CButton variant=\"destructive\">Delete account\u003C\u002FButton>\n",[173,502,175],{},{"title":74,"searchDepth":177,"depth":177,"links":504},[505,506,507,508,509],{"id":66,"depth":177,"text":67},{"id":108,"depth":177,"text":109},{"id":116,"depth":177,"text":117},{"id":123,"depth":177,"text":124},{"id":139,"depth":177,"text":140,"children":510},[511],{"id":456,"depth":186,"text":457},"Keep component-owned visual styles inside the component contract.",[406],{},{"title":516},"Component restyling","\u002Fshadcn\u002Frules\u002Fui\u002Fno-restyle",{"title":401,"description":512},"shadcn\u002Frules\u002Fui\u002Fno-restyle","RW_sLJ5zwRMt_kNRgpCErNA6uq2LJholXz_FmMEv8nc",{"id":522,"title":523,"body":524,"category":54,"description":613,"diagnosticCodes":614,"docsUrl":529,"extension":189,"fix":57,"framework":29,"meta":615,"navigation":616,"pack":58,"path":618,"recommendedReplacement":564,"ruleId":530,"seo":619,"severity":60,"source":61,"sourceUrl":62,"stem":620,"why":559,"__hash__":621},"rules\u002Fshadcn\u002Frules\u002Fui\u002Fno-unknown-classes.md","Use known design-system classes",{"type":49,"value":525,"toc":604},[526,531,533,555,557,560,562,565,567,574,576,580,582,591,593,602],[52,527],{"category":54,"diagnosticCodes":528,"docsUrl":529,"fix":57,"pack":58,"ruleId":530,"severity":60,"source":61,"sourceUrl":62},"SHAD0006","https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Flint\u002Fblob\u002Fmain\u002Fdocs\u002Frules\u002Fno-unknown-classes.md","shadcn\u002Fno-unknown-classes",[64,532,67],{"id":66},[69,534,536],{"className":71,"code":535,"language":73,"meta":74,"style":74},"pnpm vite-doctor . --extends shadcn\u002Fstrict --rules shadcn\u002Fno-unknown-classes\n",[76,537,538],{"__ignoreMap":74},[79,539,540,542,544,546,548,550,552],{"class":81,"line":82},[79,541,86],{"class":85},[79,543,90],{"class":89},[79,545,93],{"class":89},[79,547,96],{"class":89},[79,549,99],{"class":89},[79,551,102],{"class":89},[79,553,554],{"class":89}," shadcn\u002Fno-unknown-classes\n",[64,556,109],{"id":108},[111,558,559],{},"Misspelled or unsupported class names generate no CSS. Without a resolvable Tailwind theme, the Rule uses a reduced fallback that includes bundled utility names plus discovered @utility names and CSS class selectors, as in the example below. That fallback cannot validate theme tokens or provide spelling suggestions.",[64,561,117],{"id":116},[111,563,564],{},"Correct the class name or declare the intended utility in the theme. Allow external stylesheet classes by exact name only when the application loads their CSS.",[64,566,124],{"id":123},[126,568,569],{},[129,570,571],{},[132,572,136],{"href":529,"rel":573},[135],[64,575,140],{"id":139},[142,577,579],{"id":578},"correct-a-utility-name-using-the-fallback-grammar","Correct a utility name using the fallback grammar",[111,581,148],{},[69,583,585],{"className":151,"code":584,"language":153,"meta":74,"style":74},"\u003Cdiv className=\"flex-cols\" \u002F>\n",[76,586,587],{"__ignoreMap":74},[79,588,589],{"class":81,"line":82},[79,590,584],{},[111,592,162],{},[69,594,596],{"className":151,"code":595,"language":153,"meta":74,"style":74},"\u003Cdiv className=\"flex-col\" \u002F>\n",[76,597,598],{"__ignoreMap":74},[79,599,600],{"class":81,"line":82},[79,601,595],{},[173,603,175],{},{"title":74,"searchDepth":177,"depth":177,"links":605},[606,607,608,609,610],{"id":66,"depth":177,"text":67},{"id":108,"depth":177,"text":109},{"id":116,"depth":177,"text":117},{"id":123,"depth":177,"text":124},{"id":139,"depth":177,"text":140,"children":611},[612],{"id":578,"depth":186,"text":579},"Avoid classes that are not declared by the project's Tailwind theme.",[528],{},{"title":617},"Unknown classes","\u002Fshadcn\u002Frules\u002Fui\u002Fno-unknown-classes",{"title":523,"description":613},"shadcn\u002Frules\u002Fui\u002Fno-unknown-classes","5eWKGAyX32N4IS5OwWKhI9HMJmf9CXvkVeOraoWXcKE",{"id":623,"title":624,"body":625,"category":54,"description":753,"diagnosticCodes":754,"docsUrl":630,"extension":189,"fix":57,"framework":29,"meta":755,"navigation":756,"pack":58,"path":758,"recommendedReplacement":665,"ruleId":631,"seo":759,"severity":60,"source":61,"sourceUrl":62,"stem":760,"why":660,"__hash__":761},"rules\u002Fshadcn\u002Frules\u002Fui\u002Frequire-static-classes.md","Keep component classes statically analyzable",{"type":49,"value":626,"toc":744},[627,632,634,656,658,661,663,666,668,675,677,681,683,713,715,742],[52,628],{"category":54,"diagnosticCodes":629,"docsUrl":630,"fix":57,"pack":58,"ruleId":631,"severity":60,"source":61,"sourceUrl":62},"SHAD0005","https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Flint\u002Fblob\u002Fmain\u002Fdocs\u002Frules\u002Frequire-static-classes.md","shadcn\u002Frequire-static-classes",[64,633,67],{"id":66},[69,635,637],{"className":71,"code":636,"language":73,"meta":74,"style":74},"pnpm vite-doctor . --extends shadcn\u002Fstrict --rules shadcn\u002Frequire-static-classes\n",[76,638,639],{"__ignoreMap":74},[79,640,641,643,645,647,649,651,653],{"class":81,"line":82},[79,642,86],{"class":85},[79,644,90],{"class":89},[79,646,93],{"class":89},[79,648,96],{"class":89},[79,650,99],{"class":89},[79,652,102],{"class":89},[79,654,655],{"class":89}," shadcn\u002Frequire-static-classes\n",[64,657,109],{"id":108},[111,659,660],{},"Unreadable class values on recognized components prevent other design-system Rules from checking those classes. Complete static strings and conditional choices between them remain analyzable.",[64,662,117],{"id":116},[111,664,665],{},"Choose between complete class strings instead of assembling class names from dynamic fragments. Keep component-owned variant calls inside the component implementation.",[64,667,124],{"id":123},[126,669,670],{},[129,671,672],{},[132,673,136],{"href":630,"rel":674},[135],[64,676,140],{"id":139},[142,678,680],{"id":679},"choose-between-complete-class-names","Choose between complete class names",[111,682,148],{},[69,684,686],{"className":151,"code":685,"language":153,"meta":74,"style":74},"import { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\nexport function SaveButton({ width }: { width: string }) {\n  return \u003CButton className={`w-${width}`}>Save\u003C\u002FButton>\n}\n",[76,687,688,692,696,701,707],{"__ignoreMap":74},[79,689,690],{"class":81,"line":82},[79,691,469],{},[79,693,694],{"class":81,"line":177},[79,695,475],{"emptyLinePlaceholder":474},[79,697,698],{"class":81,"line":186},[79,699,700],{},"export function SaveButton({ width }: { width: string }) {\n",[79,702,704],{"class":81,"line":703},4,[79,705,706],{},"  return \u003CButton className={`w-${width}`}>Save\u003C\u002FButton>\n",[79,708,710],{"class":81,"line":709},5,[79,711,712],{},"}\n",[111,714,162],{},[69,716,718],{"className":151,"code":717,"language":153,"meta":74,"style":74},"import { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\nexport function SaveButton({ wide }: { wide: boolean }) {\n  return \u003CButton className={wide ? \"w-full\" : \"w-auto\"}>Save\u003C\u002FButton>\n}\n",[76,719,720,724,728,733,738],{"__ignoreMap":74},[79,721,722],{"class":81,"line":82},[79,723,469],{},[79,725,726],{"class":81,"line":177},[79,727,475],{"emptyLinePlaceholder":474},[79,729,730],{"class":81,"line":186},[79,731,732],{},"export function SaveButton({ wide }: { wide: boolean }) {\n",[79,734,735],{"class":81,"line":703},[79,736,737],{},"  return \u003CButton className={wide ? \"w-full\" : \"w-auto\"}>Save\u003C\u002FButton>\n",[79,739,740],{"class":81,"line":709},[79,741,712],{},[173,743,175],{},{"title":74,"searchDepth":177,"depth":177,"links":745},[746,747,748,749,750],{"id":66,"depth":177,"text":67},{"id":108,"depth":177,"text":109},{"id":116,"depth":177,"text":117},{"id":123,"depth":177,"text":124},{"id":139,"depth":177,"text":140,"children":751},[752],{"id":679,"depth":186,"text":680},"Use class values that the design-system analyzer can resolve.",[629],{},{"title":757},"Static classes","\u002Fshadcn\u002Frules\u002Fui\u002Frequire-static-classes",{"title":624,"description":753},"shadcn\u002Frules\u002Fui\u002Frequire-static-classes","FOMBcZHikGZj9Fw43ZzBX81qOFgEh-xHMH0jkPKTil0",1791309511692]