Getting started
Open the file and you can work straight away. Nothing needs installing and nothing needs converting - the components, the icons and the tokens are already in here.
Using the kit as a shared library
The kit is meant to be connected, not duplicated. Once it is published as a shared library, every file that connects to it draws from the same components and the same tokens, and updates travel in one direction instead of being copied around by hand.
Open the file that holds the components and tokens, open the Libraries dialog from the main menu, and publish it as a shared library. Give it a moment: a library this size carries several thousand shapes, so the first publish is the slow one.
Open the project you want to use it in, find the kit under shared libraries in the same dialog, and connect it. Its components appear in the Assets panel next to your own.
Token sets arrive with the library, so colours, spacing and radii resolve without redefining anything. Switching the colour theme restyles everything drawn from the library at once, and an instance can still be overridden locally when a project genuinely needs something different.
Changes published from the source file are offered to every connected project, and each project accepts them when it suits, so nothing shifts underneath you mid-flow.
Why connect instead of copy
Copying the file instead gives you all of the components and none of that.
The five things this kit leans on
If you know these, the file will behave the way you expect it to.
Anything reusable is a published component, not a copied group. Editing the main updates every copy, while a copy can still override its own text, colours and sizes. Larger components here are assembled from smaller published ones, so a table cell holds a real badge rather than a drawing of one.
Related states live in one variant set with named properties, so switching from default to disabled is a dropdown rather than a hunt through the layer tree. Some sets carry seven properties at once - the switch alone has 192 combinations.
Flex layout is what makes rows, cards and menus grow with their content instead of being redrawn at every size. One quirk is worth knowing before you fight it: padding is applied symmetrically, so a one-sided indent needs a nested board rather than a single padding value.
Colour, spacing, radius, type size and font weight are tokens rather than typed values. Five sets cover the Tailwind scale, the semantic layer that maps onto shadcn's names, and the two colour modes. Line height is the one exception - Penpot stores it as a multiplier, so it stays a literal.
Light and dark are token themes, not duplicate pages. Switching the active theme restyles the whole file at once, which is also the reason nothing in here hard-codes a hex value.