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

Experiment

Footer

ButtonTransparent

MenuItemDropdown

MenuSubmenuItem

VideoBlock

Github Stars Counter

ButtonSecondary

ButtonPrimary

PenpotGlobalContext

TabFilter

LibrariesTemplates

Create stunning designs with Penpot, the free collaborative online design tool. Access a wide range of libraries and templates. Start designing today!

Penpot | Libraries & Templates

TrackingCode

OnClick analytics tracker

TextInput

Header

MenuMobileDrawer

Screen

plasmic-link-preview

react-awesome-reveal

react-scroll-parallax-global

plasmic-basic-components

react-youtube

plasmic-tabs

plasmic-cms

plasmic-rich-components

antd5 hostless

react-slick

Penpot main website

radix-ui

react-parallax-tilt

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

This file contains four different examples of prototyping with Penpot.

Proto-1.1.jpg

proto-1.png

proto-2.png

Prototype examples

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

The good fit for web and mobile projects.

img (37).webp

style-1.png

style-2.png

StyleUI

img (11).webp

Mastodon app

img (29).webp

Mobile Viewport Templates

img (23).webp

OSS Product Management pro...

img (20).webp

Open Color

Templates for slides deck and a talk design cheatsheet to create meaningful presentations.

img (9).webp

Screenshot 2024-10-29 092823.png

Penpot slides template

cover-comm-wireframes.jpg

Community wireframes

img (6).webp

Board game cards

cover-avataaars.jpg

Avataaars by Pablo Stanley

cover-bw.jpg

Mobile UI Starter kit

A set of elements to streamline your research processes or any activity you need.

cover-whiteboards.jpg

Screenshot 2024-10-29 094940.png

Screenshot 2024-10-29 094951.png

Whiteboarding kit

img (40).webp

GNOME Components

This file contains a variety of common layouts used in UI design, created using grid and flex layouts.

img (33).webp

Basic layouts template

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 (35).webp

Ultimate whiteboarding kit

img (34).webp

Sales dashboard example

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

img (28).webp

Iconoir

img (25).webp

Nextcloud design system

img (24).webp

Accessibility Documentation

img (22).webp

Radix UI icons

img (21).webp

User Persona Template

A simple yet effective UI element library for creating podcast or music apps.

img (19).webp

Screenshot 2024-10-29 092159.png

Screenshot 2024-10-29 092222.png

Podcast app

img (17).webp

Tailwind kit

img (16).webp

Feather icons

img (15).webp

FontAwesome icons

img (12).webp

50+ Social Media Icons

img (14).webp

Boostrap icons

img (8).webp

Safari OS 15

img (7).webp

Company logos

Components focused on creating annotations on wireframes and designs.

cover-notes.jpg

Screenshot 2024-10-29 100445.png

Screenshot 2024-10-29 100504.png

UX Notes

img (4).webp

Just another project starter

img (3).webp

Just another resume template

img (2).webp

Curriculum

img (1).webp

CSD Matrix

img.webp

Community cards

cover-user-flow.jpg

User flow elements

cover-th-poster.jpg

Community posters

cover-neomorphic.jpg

Neomorphic UI kit

cover-md3.jpg

Material Design 3

cover-material-icons.jpg

Material Design icons

cover-icon-template.jpg

iOS icon template

A set of gopher illustrations free to use.

cover-gopher-illustrations.jpg

Screenshot 2024-10-29 101325.png

Screenshot 2024-10-29 101330.png

Gopher Illustrations

cover-firefox-mockup.jpg

Firefox mockup

cover-coreui.jpg

Core UI Demo

cover-coreui-icons.jpg

CoreUI icon pack

The Lean UX Canvas is rooted in the Lean Startup methodology, which encourages a build-measure-learn feedback loop.

cover-canvas.jpg

Screenshot 2024-10-29 102944.png

Screenshot 2024-10-29 102954.png

Lean UX Canvas

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

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

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

This file contains the design system used by the Penpot team.

DS-2.1.jpg

Screenshot 2024-10-29 102527.png

Screenshot 2024-10-29 102518.png

Screenshot 2024-10-29 102557.png

Penpot Design System

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

img (27).webp

Atomic Design

img (26).webp

Lucide Icons

Libraries & templates

How to use libraries and templates

How to use libraries and templates