[{"data":1,"prerenderedAt":209},["ShallowReactive",2],{"blog-blueprints/lovable-shadcn":3},{"id":4,"title":5,"body":6,"category":189,"date":190,"dateModified":190,"description":191,"draft":192,"extension":193,"faq":194,"featured":192,"headerVariant":195,"image":194,"keywords":194,"meta":196,"navigation":197,"ogDescription":198,"ogTitle":194,"path":199,"readTime":200,"schemaOrg":201,"schemaType":202,"seo":203,"sitemap":204,"stem":205,"tags":206,"twitterCard":207,"__hash__":208},"blog/blog/blueprints/lovable-shadcn.md","Lovable + shadcn/ui Security Blueprint",{"type":7,"value":8,"toc":180},"minimark",[9,20,24,30,35,38,53,62,66,75,79,88,92,97,100,103,106,109,112,122,158,168],[10,11,12],"blueprint-summary",{},[13,14,15,19],"p",{},[16,17,18],"strong",{},"To secure a Lovable + shadcn/ui stack,"," you need to: (1) validate all form inputs server-side (client validation is UX only), (2) sanitize user content before display, (3) avoid dangerouslySetInnerHTML with untrusted content, and (4) ensure auth checks happen on the backend, not just in UI. This blueprint covers component security and form handling best practices.",[21,22],"blueprint-meta",{"time":23},"30 min",[25,26,27],"tldr",{},[13,28,29],{},"shadcn/ui provides accessible, well-designed components, but security depends on how you use them. Key concerns: always validate form inputs server-side (don't rely on client-side validation), sanitize any user content displayed in components, and ensure authentication checks aren't only in UI components.",[31,32,34],"h2",{"id":33},"shadcnui-form-security","shadcn/ui Form Security",[13,36,37],{},"shadcn/ui forms work well with react-hook-form and zod validation:",[39,40,42],"code-block",{"label":41},"Client-side validation (UX only)",[43,44,49],"pre",{"className":45,"code":47,"language":48},[46],"language-text","import { z } from 'zod';\n\nconst formSchema = z.object({\n  email: z.string().email(),\n  password: z.string().min(8),\n});\n\n// This improves UX but is NOT security\n// Always validate again on the server\n","text",[50,51,47],"code",{"__ignoreMap":52},"",[54,55,56],"warning-box",{},[13,57,58,61],{},[16,59,60],{},"Client-side validation is for UX, not security."," Users can bypass any client-side checks. Always validate and sanitize on your backend.",[31,63,65],{"id":64},"lovable-content-display-security","Lovable Content Display Security",[39,67,69],{"label":68},"Safe content rendering",[43,70,73],{"className":71,"code":72,"language":48},[46],"// DANGEROUS: Direct HTML rendering\n\u003Cdiv dangerouslySetInnerHTML={{ __html: userContent }} />\n\n// SAFE: React handles escaping\n\u003Cp>{userContent}\u003C/p>\n\n// If you must render HTML, sanitize first\nimport DOMPurify from 'dompurify';\n\u003Cdiv dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userContent) }} />\n",[50,74,72],{"__ignoreMap":52},[31,76,78],{"id":77},"shadcnui-authentication-in-components","shadcn/ui Authentication in Components",[39,80,82],{"label":81},"UI-level auth check (UX only)",[43,83,86],{"className":84,"code":85,"language":48},[46],"// This only affects what users SEE\nfunction AdminButton() {\n  const { user } = useAuth();\n\n  if (!user?.isAdmin) return null;\n\n  return \u003CButton>Admin Action\u003C/Button>;\n}\n\n// The backend must ALSO check admin status\n// when the action is performed\n",[50,87,85],{"__ignoreMap":52},[31,89,91],{"id":90},"security-checklist","Security Checklist",[93,94,96],"h4",{"id":95},"shadcnui-security-checklist","shadcn/ui Security Checklist",[13,98,99],{},"Form validation duplicated on server",[13,101,102],{},"User content properly escaped",[13,104,105],{},"No dangerouslySetInnerHTML with untrusted content",[13,107,108],{},"Auth checks in backend, not just UI",[13,110,111],{},"Sensitive actions verified server-side",[113,114,115],"faq-section",{},[116,117,119],"faq-item",{"question":118},"Are shadcn/ui components secure?",[13,120,121],{},"The components themselves are well-built and accessible. Security depends on how you use them-validate inputs, sanitize content, and don't rely solely on UI-level checks.",[123,124,125,129,132],"stack-comparison",{},[31,126,128],{"id":127},"alternative-stack-options","Alternative Stack Options",[13,130,131],{},"Consider these related blueprints for different stack combinations:",[133,134,135,144,151],"ul",{},[136,137,138,143],"li",{},[139,140,142],"a",{"href":141},"/blog/blueprints/lovable-tailwind","Lovable + Tailwind"," - Underlying CSS framework",[136,145,146,150],{},[139,147,149],{"href":148},"/blog/blueprints/lovable-supabase","Lovable + Supabase"," - Backend for form data",[136,152,153,157],{},[139,154,156],{"href":155},"/blog/blueprints/lovable-auth0","Lovable + Auth0"," - Authentication provider",[159,160,161,165],"related-articles",{},[162,163],"related-card",{"description":164,"href":141,"title":142},"Styling security",[162,166],{"description":167,"href":148,"title":149},"Backend security",[169,170,173,177],"cta-box",{"href":171,"label":172},"/","Start Free Scan",[31,174,176],{"id":175},"using-shadcnui-with-lovable","Using shadcn/ui with Lovable?",[13,178,179],{},"Scan your app for frontend and backend security issues.",{"title":52,"searchDepth":181,"depth":181,"links":182},2,[183,184,185,186,187,188],{"id":33,"depth":181,"text":34},{"id":64,"depth":181,"text":65},{"id":77,"depth":181,"text":78},{"id":90,"depth":181,"text":91},{"id":127,"depth":181,"text":128},{"id":175,"depth":181,"text":176},"blueprints","2026-02-05","Security guide for Lovable + shadcn/ui stack. Understand component security, form handling, and safe practices for AI-generated UI code.",false,"md",null,"purple",{},true,"Security considerations for shadcn/ui in Lovable apps.","/blog/blueprints/lovable-shadcn","6 min read","[object Object]","Article",{"title":5,"description":191},{"loc":199},"blog/blueprints/lovable-shadcn",[],"summary_large_image","j31nPKjVtcdDyqSHY_xm66Fqv9qB0RoyQNUWYvaVY6I",1775843932254]