Components

Every component, every state.

61 component pages, 1,839 addressable components. Hover, focus, active and disabled are drawn on every control that has them, because a design file has no pseudo-classes.

61 of 61 shown

Accordion12 variants
Detail page
Alert4 variants
Detail page
CancelDelete
Alert Dialog8 variants
Detail page
16 : 9
Aspect Ratio17 variants
Detail page
Attachment30 variants
Detail page
Avatar39 variants
Detail page
DefaultOutline
Badge30 variants
Detail page
//
Breadcrumb13 variants
Detail page
Bubble7 variants
Detail page
ButtonButton
Button264 variants
Detail page
LeftMidRight
Button Group9 variants
Detail page
Calendar105 variants
Detail page
Action
Card24 variants
Detail page
Carousel25 variants
Detail page
Chart84 variants
Detail page
Checkbox120 variants
Detail page
Design ✕Penpot ✕
Chip14 variants
Detail page
Collapsible2 variants
Detail page
Search framework
Combobox33 variants
Detail page
Type a command…
Command14 variants
Detail page
Context Menu34 variants
Detail page
Data Table0 variants
Detail page
12 October 2026
Date Picker21 variants
Detail page
CancelSave
Dialog5 variants
Detail page
Drawer14 variants
Detail page
Open
Dropdown Menu32 variants
Detail page
Empty7 variants
Detail page
Field26 variants
Detail page
Form6 variants
Detail page
Hover Card7 variants
Detail page
Email
Input18 variants
Detail page
https://
Input Group20 variants
Detail page
77
Input OTP13 variants
Detail page
Item17 variants
Detail page
K
Kbd16 variants
Detail page
Label2 variants
Detail page
FileEditView
Menubar25 variants
Detail page
Message16 variants
Detail page
Message Scroller6 variants
Detail page
Navigation Menu15 variants
Detail page
123
Pagination16 variants
Detail page
Popover0 variants
Detail page
62%
Progress5 variants
Detail page
Radio Group96 variants
Detail page
Resizeable2 variants
Detail page
Separator2 variants
Detail page
Next.js
Select28 variants
Detail page
Sheet7 variants
Detail page
Sidebar102 variants
Detail page
Skeleton5 variants
Detail page
Slider7 variants
Detail page
Sonner9 variants
Detail page
Spinner20 variants
Detail page
Switch192 variants
Detail page
Table48 variants
Detail page
AccountPassword
Tabs31 variants
Detail page
Textarea5 variants
Detail page
BI
Toggle30 variants
Detail page
BIU
Toggle Group5 variants
Detail page
Add to library
Tooltip4 variants
Detail page
Aa
Typography6 variants
Detail page
Questions

Before you open the file

The things people ask first, answered without marketing.

Are these real components, or pictures of them?

Real ones. Every entry above is a published Penpot component with named variant properties, not a group that has been copied around. Editing the main updates every instance in the file, and larger components are assembled from smaller published ones - a table cell holds an actual badge, a sidebar row holds an actual switch.

Why are the variant counts so large?

Because a design file has no pseudo-classes. In a browser, hover, focus, active and disabled cost nothing; here each one has to be drawn. That is where 1,692 variants come from, and it is the difference between a kit you can design a real interface with and one that only looks right in a screenshot.

Does everything work in dark mode?

Yes. Light and dark are token sets, so switching the active theme restyles every component at once and neither mode can drift from the other. The usage example frames are light only, deliberately - the components carry both modes, the examples just do not duplicate themselves to show it.

Are icons included?

The complete Tabler outline set, 5,130 icons, already imported into the file and sized. They are real shapes in the document rather than a link to a plugin, so an icon is never a reason to leave the file or to install anything.

Can I add my own components?

Yes, and the Components page in the docs is a recipe for doing it so that yours are indistinguishable from the rest: the two frames per page where an example earns its place, flex rather than coordinates, every colour bound to a semantic token, and the states the rest of the kit covers.

What happens when shadcn/ui changes?

Components land page by page and each is checked against the source before it ships. Updates are included for the life of the kit with no renewal, and where Penpot cannot do what the source does, the difference is written on that component's page rather than quietly smoothed over.

Something else on your mind? Read the docs