LandingKit for pen.dev
Build a landing page from 46 finished blocks. Not from a blank frame.
LandingKit is a pen.dev design system: shadcn/ui tokens, 53 primitives and 46 landing page blocks for desktop and mobile. Set your brand once and every block follows.
Opens in pen.dev as a library. Token names match Tailwind v4 and shadcn/ui.
One-time purchase · €19 or $25 · Money back if it doesn’t open in pen.dev
On your phone? LandingKit runs in pen.dev on a computer. Send yourself the link and look at it later at your desk.
Email me the link
How it works
-
01
Add it as a design system
Add LandingKit to pen.dev as a design system. From then on it’s there as the starting point for every new page.
-
02
Set your brand once
Change the brand colour, two fonts and the logo. All 99 components follow, in light and dark.
-
03
Stack blocks into a page
Pick a navbar, a hero, proof and pricing. Flip any section dark with one setting, then hand it to code.
What’s in the file
- 53
- primitives
- 63
- design tokens
- 2
- themes, light and dark
- 7
- mobile layouts
- 46
- landing page blocks
Why it exists
I was fed up with the two usual options: buying a landing page template and spending days bending it to fit, or building every page from scratch. Both took far too long.
So I collected the sections that keep working on the best SaaS sites, from centred heroes and bento grids to pricing tables and FAQs, and rebuilt them as one system on shadcn/ui tokens, with every text colour checked for contrast. Now a new page starts with picking blocks and setting my brand, not with a blank frame. The page you’re reading is the kit’s first real test: it was assembled from LandingKit blocks and re-themed with my own colours and fonts.
Sven Read, product designer near Munich
What’s inside
Every block is a component you drop in and edit. The previews below are the untouched kit, before re-theming. Four navigation bars and seven mobile layouts come with it too.
What it promises
- Tokens, not hard-coded colours
- Every colour, size and radius is a variable. Change the brand once and all 99 components follow.
- Light and dark from one set
- Set any section to dark mode and it inverts cleanly, without a second set of components.
- Contrast checked
- Every text colour pair meets WCAG AA in both themes. Form fields have visible borders and real labels.
- Mobile included
- 390px versions of the navbar, hero, features, pricing, FAQ, call to action and footer, with 44px touch targets.
- Ready for code
- Token names match Tailwind v4 and shadcn/ui, so a developer can rebuild any block without guessing.
- A complete example
- A full SaaS page, desktop and mobile, built only from the kit’s blocks. Copy it and start editing.
Pricing
One purchase. Yours to keep.
One price for the whole kit: every primitive, every block, both themes and the mobile layouts. No tiers, no subscription.
Secure checkout with Polar. Money back within 30 days if the kit doesn’t open in pen.dev.
LandingKit
For your own products and client work.
€19 one-time, or $25
Get LandingKit- The full library: 53 primitives and 46 blocks
- Light and dark themes, desktop and mobile
- All 1.x updates
- Commercial use, including client projects
What you need
- The pen.dev desktop app. It’s free for now
- Your brand colour, two fonts and a logo
- Optional: a Tailwind v4 and shadcn/ui project, if you build the page in code
The licence
Use LandingKit for your own products and for client work, as often as you like. The pages you make are yours. Please don’t resell the kit itself or share the library file publicly.
Questions
Is this a Figma file?
No. It’s a pen.dev library, a .lib.pen file. pen.dev can export pages as HTML with Tailwind, and the token names match shadcn/ui.
Does it include code?
No React components. The tokens are named like Tailwind v4 and shadcn/ui variables, so each block rebuilds quickly with shadcn.
Can I use it for client work?
Yes, the licence covers client projects. You can’t resell or share the kit itself.
What if it doesn’t work for me?
If the kit doesn’t open in pen.dev, email me@svenread.com within 30 days and you get your money back. Before that, I’ll happily help you get it running.
Is it a subscription?
No. You pay once and keep the file. Updates within version 1 are included.
Does it work with pen.dev’s AI?
Yes. Ask it to build a page from the kit’s blocks. That’s how this page was made.
Your next landing page, started from finished blocks.
One-time purchase · €19 or $25 · Money back if it doesn’t open in pen.dev