7495 A/B test on website hero and sub-hero V2

Experiment

Footer

ButtonTransparent

MenuItemDropdown

MenuSubmenuItem

VideoBlock

Github Stars Counter

ButtonSecondary

ButtonPrimary

PenpotGlobalContext

Inkeep AI Search Bar

TabFilter

LibrariesTemplates

Jumpstart your designs with Penpot's libraries and templates! Discover icon sets, UI kits, wireframes, and more. Contribute and share your own creations.

Penpot | Libraries & Templates

TrackingCode

OnClick analytics tracker

TextInput

Header

MenuMobileDrawer

Screen

plasmic-link-preview

react-awesome-reveal

react-scroll-parallax-global

plasmic-embed-css

plasmic-basic-components

react-youtube

plasmic-tabs

react-aria

plasmic-cms

plasmic-rich-components

antd5 hostless

react-slick

Penpot main website

radix-ui

react-parallax-tilt

Ultimate collection of customizable UI elements to design professional mobile and web apps. 

cover-md3.jpg

Material Design 3

This file contains four different examples of prototyping with Penpot.

Proto-1.1.jpg

proto-1.png

proto-2.png

Prototype examples

New to Penpot? Don’t worry! This tutorial will teach you the basics so you can start getting the most out of your designs.

tutorial-2.0.jpg

Screenshot 2024-10-29 103400.png

Screenshot 2024-10-29 103416.png

Tutorial for beginners

The good fit for web and mobile projects.

img (37).webp

style-1.png

style-2.png

StyleUI

Kickstart any project in minutes with a complete design system featuring responsive components, design tokens, and Material Design guidelines—all built natively for Penpot.

Labyrinth UI - Free.png

01.png

02.png

03.png

Labyrinth UI free kit

This file is a comprehensive collection of icons designed to represent various properties and functions of the Blender user interface. These icons can be used for navigation, tool selection, or interface customization, providing visual cues that enhance usability and accessibility. The set is ideal for integration into design tools, software interfaces, or other digital products that require intuitive, user-friendly visual elements for seamless user experience.

Artboard.jpg

blender1.png

blender2.png

blender3.png

Blender Icons Set

cover-coreui.jpg

Core UI Demo

This file contains 141 components you can use to create wireframes.

img (32).webp

wf-1.png

wf-2.png

wf-3.png

Minimalistic Wireframing Kit

img (30).webp

PrimeIcons

UI elements to create your app for plants. Why not?

cover-plants.jpg

Screenshot 2024-10-29 100135.png

Screenshot 2024-10-29 100119.png

Plants app

Learn how to build interactive prototypes to visualize how users navigate through your screens and mimic your product behaviour.

cover-interactive-music.jpg

Screenshot 2024-10-29 101134.png

Interactive music app

cover-material.jpg

Material Design Baselineal

UI elements to create your app for smartwatches.

cover-watch.jpg

Screenshot 2024-10-29 095632.png

Screenshot 2024-10-29 095619.png

Smartwatch UI

Elements such as basic components, links and pages to create user flows. 

cover-user-flow.jpg

User flow elements

When you need a minimum variety of different points of view, it may be more effective to play with the main topic and focus on different perspectives.  

img (10).webp

Cartas creativas

Example of UI design, flex and grid layouts, prototyping, light and dark mode colors, typographies and components. 

img (34).webp

Sales dashboard example

Accessibility and interactions documentation annotation kit. 

img (24).webp

Accessibility Documentation

A crisp set of 15x15 icons designed by the WorkOS team. 

img (22).webp

Radix UI icons

img (16).webp

Feather icons

Dark and light mode curriculum site template with printed version available. 

img (2).webp

Curriculum

cover-material-icons.jpg

Material Design icons

cover-icon-template.jpg

iOS icon template

img (11).webp

Mastodon app

Beautiful hand-crafted SVG icons by the makers of Tailwind CSS. 

img (18).webp

Heroicons

cover-circum.jpg

Circum icons pack

img (3).webp

Just another resume template

It’s time to bring your wildest monster ideas to life! Use flex layout to create your own creature.

cover  monster game new.jpg

3.jpg

2.jpg

1.jpg

Monster Game

img (15).webp

FontAwesome icons

A set of gopher illustrations based on the LOTR world. 

gopher-cover.jpg

Screenshot 2024-10-30 104159.png

Screenshot 2024-10-30 104206.png

Gopher illustrations v2

img (21).webp

User Persona Template

img (12).webp

50+ Social Media Icons

img (4).webp

Just another project starter

Coleção de elementos de UI e templates customizáveis  para design de apps de classificação de imagens com App Inventor

Cover.jpg

Screenshot 2025-01-24 164658.png

Screenshot 2025-01-24 164639.png

App Inventor UI Design Kit

200 free icons for websites and applications. This icons are made available under the MIT license. 

cover-zest.jpg

Zest icons

cover-neomorphic.jpg

Neomorphic UI kit

img (8).webp

Safari OS 15

This is a file where you can find different components that allow you to easily create wireframes with low fidelity so you can focus on structure, content and flows.

WKit-1.1.jpg

Screenshot 2024-10-29 094501.png

Screenshot 2024-10-29 094514.png

Screenshot 2024-10-29 094627.png

Wireframes kit

cover-ui-starter.jpg

Dashboard UI starter kit

Mix and match avatar library. Free for commercial and personal use. 

cover-avataaars.jpg

Avataaars by Pablo Stanley

img (14).webp

Boostrap icons

Welcome to the Flex Layout playground, the new property in Penpot that is revolutionizing our design workflow, inspired by the well-known CSS Flexbox.

Cover (1).jpg

Screenshot 2024-10-30 104347.png

Screenshot 2024-10-30 104353.png

Flex Layout Playground

cover-ant-design.jpg

Ant Design UI Kit Lite

The Eisenhower Matrix, also called the Urgent-Important Matrix, is a handy tool for figuring out what tasks deserve your attention first. It helps you prioritize by breaking tasks into four easy-to-understand categories based on urgency and importance.

Cover (2).jpg

Screenshot 2024-11-11 131523.png

Eisenhower matrix

img (29).webp

Mobile Viewport Templates

In September 2023 the Turing Institute Practitioner's hub were developing a curriculum of support they would offer their cohort members that were building open source science and research related software/data  - Superbloom developed a series of 3 and 3.5hr workshops that were centred around product management, open roadmapping and user research for open source software and open data projects. These are the resources, exercises and content that was delivered as part of those workshops, made openly available for everyone. These templates will help any OSS project at any stage of their development or creation better understand their purpose, strategy, value proposition to users and begin to plan for a flexible, open and participatory way of developing and building OSS.

img (23).webp

OSS Product Management pro...

img (13).webp

Fusion web3 iconset

These icons are from the phosphore project. Free, open-source and shared under the MIT license.

Cover (3).jpg

Screenshot 2024-11-13 065906.png

Phosphor Icons

Grid Layout allows you to efficiently organize, align, and distribute items within a container as well. You can create rows and columns of elements, giving you fine-grained control over their expansion, alignment, and responsiveness to various screen sizes. It's a versatile tool for creating responsive designs.

img (38).webp

Grid Layout Playground

img (28).webp

Iconoir

This file contains components for 700+ icons from the CSS.gg open-source project.

img (31).webp

Screenshot 2024-10-29 091705.png

Screenshot 2024-10-29 091725.png

CSS.gg Icons

Libraries & templates

How to use libraries and templates

How to use libraries and templates

Product

Legal

Company

Resources