Design systems

1. 1

   If your component library is private, go to Workspace settings > Build secrets and add any necessary build secrets, like npm tokens.

   This allows Lovable to access your private packages when creating or releasing your design system.

2. 2

   From the '+' menu in the Lovable prompt box, select 'Design' then 'Use a design system', and finally 'Create design system'.

   This starts a new dedicated project that will serve as your design system.

3. 3

   Give your new design system project a clear and meaningful name.

   This name will be used to identify your design system when you connect it to other projects.

4. 4

   In the project chat, tell Lovable how to configure your design system. You can either provide an existing library (npm package name, public Git repo URL, or upload files) or give structured instructions to build it from scratch.

   This tells Lovable where to find your components, styles, and guidelines, or how to create them if you're building from scratch.

5. 5

   Select 'Release version' in your design system project.

   This generates the necessary files, bumps the version, and makes your design system available for other projects to connect to.

Create a new design system project. I want to build it from scratch. My high-level goal is to create a consistent UI for all my projects. I want to define components for buttons, input fields, and navigation bars. My styling guidelines should use CSS variables for colors and fonts. I'll provide more details on specific components and tokens as we go.

Design System

A collection of reusable components, guidelines, and standards that help you build consistent user interfaces across different software projects.

React component libraries

A set of pre-built, reusable pieces of user interface (like buttons, forms, or navigation bars) made with the React programming tool.

npm package

A bundle of code that can be easily shared and reused by other software projects, managed by the Node Package Manager (npm).

Schema

A structured description of your design system's elements, like colors, fonts, and component properties, that a computer can read and understand.

Tokens

Small, named values (like specific colors, fonts, or spacing measurements) that represent design decisions and are used consistently across your design system.

Adherence scanner

A tool that automatically checks if your project is following the rules and guidelines set by your design system, like using the correct colors or components.

Build secrets

Sensitive information, like passwords or access tokens, that Lovable uses securely during the process of building or accessing private resources for your project.

Barrel file

A file that re-exports other modules from a directory, making it easier to import multiple components or functions from a single place.

• You cannot convert an existing project into a design system; it must be created as a dedicated project.
• A project can only be connected to one design system at a time.
• Local edits to design system files in a connected project will be overwritten the next time you accept an update from the design system.
• An unreleased design system cannot be used by other projects; you must release it first.
• If your design system wraps an npm package, it must ship type definitions (.d.ts files) for Lovable to extract its components.
• For local design systems, ensure tokens are in top-level styling files and components are exported from `src/index.ts` or `src/components/` for Lovable to discover them.
• Creating design systems based on existing npm packages is only available on Enterprise plans.
• Design systems currently only support React component libraries natively; other frameworks like Vue, Angular, or Svelte are not officially supported.
• If you encounter React version mismatches or conflicting dependencies, you'll need to explicitly ask Lovable to adjust them.
• If the preview looks broken after connecting, ask Lovable to verify the design system wiring.
• If Lovable isn't using expected components, point it out in the chat (e.g., 'use the Button from the design system').
• Release failures for private packages often mean missing build secrets or incorrect .npmrc configuration for authentication.