Why Components Matter in Design Tools
Modern user interfaces are built from reusable pieces. Composability—assembling complex systems from smaller parts—is at the core of front-end development, and the design world has adopted it through design systems. Done well, these systems create a single source of truth: a change to a component updates every instance, dependencies stay simpler, and large-scale maintenance becomes manageable.
The friction point is usually translation. Designs are often built with logic that doesn't match the CSS behind the final product, so what the designer sees and what the developer codes can drift apart. Penpot addresses this by constructing UIs with the same web standards used in production. That alignment means designers and developers can talk about components in the same terms, and changes propagate consistently across a system.
Below, we walk through the component workflow in Penpot’s 2.0 release, using an example product page as our target.
Building and Structuring Components
Creation and Variants
To create a component, select the objects you want to group and choose “Create component” from the context menu. The selection becomes a reusable element that you can drop into any frame.
Components can have variants—alternative versions that keep the same base structure but change aspects like color, size, or state. Penpot uses a naming convention with slashes: naming buttons Button/primary and Button/secondary lets you quickly switch between the two types later.
Nesting and External Libraries
Components nest like components in code. You can build a card from a smaller icon component and a button component, for instance. Nesting also extends across files and organizations. You can share component libraries between projects, much like importing code dependencies, or pull in external resources such as UI kits and icon sets. Penpot maintains a list of these libraries—from full design systems like Material Design to common icon packs—available for direct import.
Managing the Assets Panel
The 2.0 release includes a redesigned Assets panel, where components live. From there you can drag and drop components into your designs. The panel also supports storing colors and typography as reusable styles, so you can name them and arrange them in hierarchies to organize the visual foundation of your system.
Flexibility in Component Instances
Front-end libraries like React give components props for configuration. Penpot replicates that flexibility with overrides. When you place a component instance, you can switch its variant, hide elements, alter styles, swap nested components, or change the entire layout structure—all while preserving the link back to the master component.
A distinctive capability is modifying Flex and Grid layouts inside component instances. Because Penpot’s layout system is real CSS, you can place a component into different Grid or Flex containers and observe how it behaves in near-production scenarios directly within the design tool. This makes it possible to test how a component responds in various spots on a page and fine-tune the larger system before any code is written.
Export and Documentation
Generating Code
Since Penpot components are web-ready by construction, exporting is straightforward. The Inspect panel provides layout properties and styles as well as full code snippets for any selected component. This feature—like all Penpot capabilities—is free.
Annotations
For long-term maintainability, Penpot includes annotation tools to document components directly in the file. Clear naming, variant listings, and notes on usage make handoff to developers smoother and keep the system self-explanatory.
Takeaways
Penpot’s component system pairs with real CSS layouts to bridge design and development. By working with web standards rather than abstract shapes, it allows designers to build interfaces that are already expressed in code—without giving up creative control. The tool remains fully open source, with no limits on usage or cost.
If you want to try the workflow, you can download the example file used here and import it into your Penpot account. The component editor, variant naming, nesting, overrides, and flexible layout handling are all available to explore directly.
