Design Systems & Dependencies
Design & UI · 10 articles
Are design systems versioned?
Currently, Lovable design systems are not explicitly versioned. Any changes made to the design system project immediately affect all connected projects. If you need versioning, consider creating separate design system projects (e.g., 'design-system-v1', 'design-system-v2') and connecting the appropriate version to each project.
Component not found
If a component isn't found, verify the design system is properly connected to your project in Project Settings → Connected Design Systems. Ensure the design system project exists and is published. Check that component names in the design system match the names you're using in your project. Re-import or reconnect the design system if needed.
Conflicting dependencies
Dependency conflicts occur when two packages require incompatible versions of the same library. Check package.json for duplicate or conflicting entries. Resolve by updating to compatible versions or removing unused packages. Use npm ls to view the dependency tree. If conflicts persist, ask Lovable to audit and resolve in Plan mode before proceeding.
Do design systems replace templates?
Design systems and templates serve different purposes. Design systems provide reusable components and styling rules for consistency. Templates are starter projects with full layouts and functionality. You can use both: start with a template and layer a design system on top for additional styling and components. They complement each other.
How do I see which design systems are connected to my project?
In Project Settings → Connected Design Systems, you'll see a list of all connected design systems. The list shows the system name, status, and connection date. You can also see which components and styles are inherited from each system. Disconnect any system from this interface if needed.
Is a design system just a Lovable project?
Yes, a design system in Lovable is a standard project that exports reusable components, colors, fonts, and styling rules. Any Lovable project can be designated as a design system. Other projects connect to it and inherit its components and styles. Design systems are a way to enforce consistency across multiple projects.
React version mismatch
If your project's React version doesn't match a dependency, you'll see errors. Check package.json for the React version, then verify all dependencies (like shadcn/ui, Radix UI) support that version. Update outdated packages via npm or yarn, or downgrade React if needed. Lovable projects use React with Vite; ensure versions are compatible.
Styles not applying
If styles aren't applying from a design system, verify the design system is connected and published. Check that Tailwind or CSS files are exported from the design system. Clear your browser cache and hard refresh the page. Verify that component selectors aren't being overridden by local styles. Use the Visual Editor to inspect and debug styles.
What happens if two design systems define overlapping rules?
When multiple design systems define overlapping components or styles, the most recently connected system takes precedence. Earlier systems are overridden. To manage precedence, reorder the connected systems in Project Settings → Connected Design Systems. This allows you to layer systems intentionally (e.g., theme → corporate → project-specific).
What technologies do design systems support?
Lovable design systems support React, Tailwind CSS, shadcn/ui, Radix UI, and custom CSS. They export components as production-ready React code. Design systems can include custom hooks, utilities, and styling libraries. All components are TypeScript-ready and follow React best practices.
