Blocks, quietly confident.

Ten sections inspired by the shadcn block library, re-tuned through PlanckUi's design law with a little Apple in the glass. Hit Copy HTML on any block and paste it straight into your site — no account, no email, nothing to install. The widgets are the same: open the app and a guest workspace is waiting.

Hero 01

Large-title hero

Big type, tight tracking, one floating product card as the single focal point.

New · twelve blocks, free as always

Proof that feels
native everywhere.

Blocks tuned like hardware — frosted glass, quiet motion, zero dependencies. Copy any section on this page straight into your site.

Wall of love 4.9 · 218 reviews
“Pasted the snippet Tuesday morning, reviews were live before lunch.”
Marta Keller · ceramist
“Customers finally trust the checkout. Returns dropped.”
Jonas Beck · Harbor Supply Co.
Logos 01

Wordmark marquee

Social proof without invented logos — pauses on hover, wraps when motion is reduced.

Running quietly on 40,000+ sites

Harbor SupplyCafé LuneAtlas LabsBloom & CoFieldnotesVerde StudioNorthwindMaison Kit
Features 01

Bento with a spotlight

A pointer-following light, a signature cell, and 45 ms staggered entrances.

SIGNATURE

Blocks that move on purpose

Every section ships with one orchestrated moment — never decoration.

“Motion with manners — nothing grabs the pointer, everything settles.”
Design law, rule 1
“Transform and opacity only. The compositor does the work.”
Design law, rule 2
“Reduced-motion users get the same page, already settled.”
Design law, rule 3

Dark mode native

Not inverted — re-tuned. Petrol-tinted neutrals in both appearances.

Under 15 KB

No animation library, no runtime. Observer, rAF, and CSS tokens.

npx planckui add hero

CLI-style copy, quiet confirmation.

Accessible by default

Focus rings visible, contrast AA, controls 44 pt where hands meet glass.

Tabthen⏎— keyboard first.

Any framework

Plain markup and CSS variables. React, Vue, or a static page from 2011.

reactvuehtml
Stats 01

Count-up stats

Numbers ease out to their targets once, then hold still.

0

widgets in the catalog

0 KB

kilobytes, embed script

$0

dollars, forever

Pricing 01

Pricing with a segmented toggle

An iOS-style control with a spring thumb; prices crossfade in 220 ms.

Most loved

Free

Everything on this page, and the whole catalog.

$0forever
  • All 280 widgets
  • Unlimited collections
  • PlanckUi badge
  • Community support
Start free

Pro

For sites that need the badge gone.

$9/ mo
  • Badge removal
  • Custom domain embeds
  • CSV import
  • Priority support
Go Pro

Studio

For agencies shipping client sites.

$29/ mo
  • White-label embeds
  • Team seats
  • Client workspaces
  • Slack support
Talk to us

Demo pricing for the block. PlanckUi itself is free, forever.

Testimonials 01

Testimonial wall

Masonry of real-sounding quotes — the flagship widget, as a section.

“It's the first embed that didn't fight my stylesheet. Dropped in, looked native, done.”
Marta Keller · ceramist, Rotterdam
“Our reviews wall loads faster than the page it sits on. I checked twice.”
Jonas Beck · Harbor Supply Co.
“The moderation inbox is the whole product for me. Approve, done, live.”
Priya Nair · Bloom & Co
“I put a countdown and a testimonial wall on a landing page in twenty minutes.”
Tom Okafor · Fieldnotes
“Dark mode inside the widget matched my site without a single tweak.”
Lena Fischer · Atlas Labs
“Free kept making me suspicious. Eight months in, it's just… free.”
Marco Silva · Verde Studio
FAQ 01

Row accordion

grid-template-rows animation — smooth, layout-safe, keyboard friendly.

Yes — every section here is plain markup and CSS variables. Copy the JSX or the rendered HTML, bring the token block from globals.css, and the palette follows your theme automatically.

No. Reveals use IntersectionObserver, counters use requestAnimationFrame, and everything else is a CSS transition on transform or opacity. Nothing to install, nothing to bundle.

One set of semantic tokens, two values. Blocks never hard-code a color, so switching the root class re-tunes every surface, line, and shadow at once.

Every animation checks prefers-reduced-motion and settles instantly into its final state. Ambient loops — marquees, floats — switch off entirely.

The embed script is under 15 KB and renders lazily. These blocks add zero JavaScript beyond a few hundred bytes of observers.

CTA 01

Closing panel

One dark moment near the end — the boldest surface on the page, used once.

Beautiful is now pasteable.

Pick a widget, point it at your data, paste one line. Your site does the rest.

Browse the catalogRead the design brief
Login 01

Frosted sign-in

A calm card with passkey first-class, honest demo feedback, no alerts.

Sign in to PlanckUi

No password to remember. We send a link.

or

Free workspace the moment you're in.

Part III — Dark & Light. A petrol and mint collection: five near-black canvases, five white ones, Apple hardware energy in every one.

Dark 01

Launch hero

Event keynote energy — petrol glow, mint accent word, film CTA.

SEP 30 — AUTUMN KEYNOTE

One night.
Everything new.

Twenty-nine new widgets, a rebuilt editor and the fastest embed we have ever shipped. Streaming live and on replay.

Dark 02

System settings window

macOS-style window with working mint switches.

System Settings
Appearance
Controls
Wallpaper
Dark appearance
Follows your site, not the sun
Reduced motion
Every animation settles instantly
Petrol accents
The one color that does the talking
Dark 03

Now playing

Petrol-to-mint art, live progress, working play state.

The Long Wave
Midnight Oil Protocol
1:243:30
Dark 04

Dynamic island

Click to morph — the pill expands into a live player.

Dark 05

One-tap checkout

Pay button that confirms with a mint check.

PlanckUi Pro — yearly
Badge removal · custom domain
$29

One tap. Face ID. Never leaves your device.

Light 01

Activity rings

Three petrol and mint rings on an editorial white card.

Move420 / 500 kcal
Exercise31 / 45 min
Stand9 / 12 hrs
Light 02

Home screen widgets

A calendar tile and a credits tile, iOS widget grammar.

WEDNESDAYSep 24
Design review
14:00
Roast pickup
16:30
WIDGET CREDITS∞Every widget free, forever. No email asked.
Light 03

Spotlight search

Live-filtering results with keyboard hints.

⌘K
Wall of Love↩
Light 04

iOS settings list

Grouped inset rows with real toggle switches.

Widgets295 live›
Reviews wallon›
Notifications
Focus

Grouped inset rows, one hairline apart — the iOS Settings grammar.

Light 05

Control center

Connectivity dots, focus toggle and a brightness slider.

Connectivity
Focus off
Brightness

Part VI — Marketing staples. Twelve light sections every site eventually needs: proof, people, pricing and posts.

Mktg 01

Feature grid

Four pillars with petrol icon plates.

Instant embeds

One script tag, any stack. Nine kilobytes, lazy-rendered, zero layout shift.

Yours, not leased

Self-serve forever. The free tier is the product, not a countdown.

Copy-paste sections

Whole page blocks — hero, pricing, FAQ — as standalone HTML.

Theme-aware

One accent token recolors every widget for light and dark at once.

Mktg 02

Logo wall

Six wordmarks that ink in on hover.

Trusted by teams at

Fern & Co.Lattice LabsHarbor SupplyAtlas LabsBloom & CoFieldnotes
Mktg 03

Testimonial spotlight

One big quote with a metric chip.

Customer story
“We replaced a $99/month stack with embeds a founder can paste. Our trust pages went from embarrassingly empty to the best-converting real estate on the site.”
Lena Kovač
Founder, Studio Kovač
+212% signups
Mktg 04

Stats band

Four hairline-divided numbers.

590
widgets in the catalog
12,400+
teams embedding
99.98%
embed uptime
$0
today, tomorrow, forever
Mktg 05

Split CTA

Copy left, two calls right, one card.

Your trust pages are one paste away.

Reviews, ratings and social proof — embedded in minutes, styled like they were hand-built.

Browse widgetsCopy blocks
Mktg 06

Newsletter capture

Input, button, promise.

The Sunday dispatch

New widgets, embed recipes and one thing worth reading. Written by a human.

One email a week. No spam, unsubscribe anytime.

Mktg 07

Team grid

Initials, names, roles — four across.

Maya Okafor
Founder & CEO
Jonas Lindqvist
Design engineering
Priya Raman
Embed platform
Sofia Marchetti
Community
Mktg 08

Blog cards

Image cards with tags and read times.

Engineering

How our embed script stays under nine kilobytes

Sep 12 · 6 min read

Design

What Apple's Settings app taught us about toggles

Sep 5 · 4 min read

Growth

The trust widget that lifted signups 31%

Aug 28 · 5 min read

Mktg 09

Pricing compare

Free versus Pro, row by row.

FreePro
All 590 widgets
Unlimited embeds
Badge removal—
Custom domains—
Priority support—
Mktg 10

Changelog list

Version pills with dated entries.

v2.6

Interval timer, rest timer and 23 more micro-tools

Sep 18
  • New Micro-tools category
  • Prefilled examples in every preview
v2.5

Dark accents that actually glow

Sep 11
  • Theme-aware widget palette
  • Faster shadow-DOM hydration
Mktg 11

Avatar stack

Overlapping circles and a five-star row.

MOJBPRSMLK+9k

Loved by 12,400+ teams

From solo founders to agencies shipping client sites.

Mktg 12

How it works

Three steps, two arrows, zero ceremony.

1

Pick a widget

Browse 590 live previews. Everything you see is the real embed.

2

Point it at your data

Connect a collection, paste items or import a CSV. No schema, no setup.

3

Paste one line

A single script tag, any stack. It renders in a shadow root and never fights your CSS.

Part IV — App surfaces. Twelve working product-UI sections: dashboards, feeds, palettes, empty states — the pieces a real site needs after the marketing pages are done.

App 01

Dashboard header

Greeting, live counts and the primary action.

Good morning, Maya

Two reviews are waiting and the wall is trending up.

4
Widgets
2
Collections
2
Pending
App 02

Notification center

Unread dots, names, and time — scannable in one glance.

Notifications

Marcus Webb left a 5-star review on the embed

2m

Priya Raman approved “Fern & Co. — homepage”

18m

Auto-import pulled 12 reviews from your CSV

1h

Lena Kovač recorded a video testimonial

3h

Tomás Rivera shared a collection link

yesterday
App 03

Command palette

A ⌘K launcher that filters as you type — try it.

ESC
Create a new widget⌘N
Import reviews from CSV⌘I
Open the Wall of Love editor⌘E
Browse the catalog⌘G

Type to filter — the palette is fully interactive.

App 04

Kanban column

Cards with tag chips and assignee stacks.

In progress3

Wall of Love — homepage

ProofLive
MOJB

Countdown — autumn drop

Promo
PR

Rating summary — pricing page

ProofDesign
SMLK
App 05

Activity feed

A timeline with avatars and connecting lines.

Recent activity

MO

approved 3 reviews in Customer love

12 min ago

PR

embedded a Wall of Love on /pricing

1 hr ago

JB

imported 46 reviews from CSV

3 hr ago

LK

connected a custom domain

Tue ago

App 06

Invoice table

Line items with a tabular total footer.

Invoice #0042Sep 24, 2026
Wall of Love embed×1$0.00
Badge removal — yearly×1$29.00
Custom domain setup×1$0.00
Total due$29.00
App 07

Empty state

Teaches the next action instead of apologizing.

Your inbox is empty

Share your collection link and every new review lands here, ready to approve.

App 08

Onboarding steps

A three-step checklist with live states.

Set up in three steps

✓
Create your workspace
Done — welcome aboard
2
Embed your first widget
In progress — pick from 590
3
Invite your team
Unlocks after your first embed
App 09

Upload card

Dropzone plus an in-flight file with progress.

Drop your CSV here

or browse files — up to 10 MB

reviews-september.csv48 KB
64%
App 10

Mini calendar

Click a day — the footer follows your selection.

September2026
MTWTFSS
Sep 24 — nothing scheduled
App 11

Filter chips

Category chips with a live result count.

590 widgets
App 12

Upgrade card

Free-plan honesty with a soft glow accent.

Free plan

Go Pro when the badge starts to itch

  • Remove the PlanckUi badge
  • Custom domain embeds
  • White-label exports

The free plan never shrinks. Promise.

Part V — After dark. Eleven near-black showpieces: petrol glows, mint signals, code, terminals and one last CTA.

Night 01

Launch hero

Glow first, copy second — the cinematic opener.

NIGHT BUILD 04 — SHIPPED

The dark catalog.

Eleven sections that only make sense after sunset — petrol glows, mint signals and ink everywhere else.

Night 02

Feature tiles

Three mint ticks on charcoal.

Zero config

Sensible defaults that survive contact with real content.

Shadow DOM

Your site's CSS never touches the widget. Neither way.

Lazy by default

Renders when it enters the viewport. Never before.

Night 03

Metrics band

Four numbers separated by hairline light.

590
live widgets
9 KB
embed script
312 ms
median render
0
tracking calls
Night 04

Paired quotes

Two testimonials, mint quotation marks.

The dark widgets made our docs feel like a product launch. Support tickets about ‘is this safe?’ went to zero.

— Ada Lindgren, Head of Docs, Volt & Co

I pasted one line into a client's Webflow site and it just worked. Then I billed them for a week of ‘integration work’. Sorry, Jack.

— Jack Mercer, Freelance developer

Night 05

Code card

Filename tab, line numbers and a copy chip.

embed.ts
1const embed = {
2  type: 'wall-of-love',
3  theme: 'dark',
4  items: collection.approved,
5};
Night 06

Terminal

Ship the night build in five lines.

zsh — planckui
$ npx planckui add hero # dismissed — you already have it
✓ hero copied to clipboard
$ git commit -m 'night build'
✓ deployed in 38s
Night 07

Single pricing card

One plan, one button, no carousel.

Pro — yearly$29
All 590 widgets
Badge removal
Custom domain embeds
White-label exports
Night 08

Profile card

Avatar, stats row and a quiet follow.

Mira Lindholm

Design engineer · Copenhagen

12
Widgets
184
Reviews
312
Following
Night 09

Podcast episode

Play state, duration and chapter chips.

EPISODE 14· 38 min

The nine-kilobyte bet, two years later

Why we still ship a single script tag, what broke at 40 million renders, and the honest cost of shadow DOM.

Cold openThe 9 KB betWhy shadow DOMOutro
Night 10

Gradient border CTA

A petrol-to-mint frame around the ask.

Ship your night build.

Everything on this page — dark blocks, light blocks, 590 widgets — is free to paste before sunrise.

Night 11

FAQ, two columns

A light breather — four answers, two columns.

Can I use these on client sites?

Yes — every block and widget is free for commercial use. Attribution is optional and never required.

Do the dark blocks support light mode?

The dark collection is designed dark-first. The light blocks mirror it the other way around.

What framework do I need?

None. Blocks are standalone HTML and CSS. Widgets need one script tag.

How do updates work?

Embeds update themselves. Blocks are yours to keep — copy a new version when you like one.

Part VII — Apple originals. Ten sections in the Cupertino grammar: product heroes, tile grids, notifications, QuickType, Apple Intelligence and an autofill sheet.

Apple 01

Product hero

The keynote slide: name, two links, full-bleed hardware.

IPHONE AIR

The thinnest iPhone ever.

Titanium frame. All-day battery. A camera that sees in the dark so you don't have to.

Learn more ›Buy ›
Apple 02

Product tile grid

Six homepage tiles with Learn more and Buy.

WATCH

Series 11

Smarter. Brighter. Mightier.

Learn more ›Buy ›
IPAD

iPad Pro

Unbelievably thin. Incredibly powerful.

Learn more ›Buy ›
AIRPODS

AirPods Pro 3

Adaptive Audio. Now with heart rate.

Learn more ›Buy ›
MAC

MacBook Air

Sky blue color. Sky high performance.

Learn more ›Buy ›
TV+

Apple TV+

All original. All amazing.

Learn more ›Buy ›
HOME

HomePod mini

Room-filling sound.

Learn more ›Buy ›
Apple 03

TV+ banner

A cinematic title on a darkened still.

tv+

TheGlyph

A designer wakes up in a world where every interface is handwritten. New season now streaming.

Season 2 ›
Apple 04

Intelligence card

Petrol-mint glow around an on-device summary.

PLANCKUI INTELLIGENCE

Proof that writes itself.

Summarize my 42 latest reviews into a trust paragraph for the pricing page.

Writing trust copy from 42 reviews…

Processed on-device. Your reviews never leave the building.

Apple 05

Notification stack

Grouped, blurred and offset, iOS style.

Jonasnow

The new wall of love is live. It's stupid good.

PlanckUi8m

42 reviews collected this week. 39 approved.

Mail1h

Your Sunday dispatch: the 0.1g bet

Notifications stack, group and blur — the iOS grammar.

Apple 06

App Store card

GET button, ratings strip, in-app purchases.

PlanckUi Widgets
Embed social proof anywhere
★★★★★ 4.9 (12.4K)
4.9
★★★★★ 128K Ratings
#2
Top Utilities
9+
Age
In-App Purchases
Apple 07

Watch rings strip

Three rings and the numbers beside them.

12,847
steps today
48 min
in zone 3
72 bpm
resting heart
Apple 08

QuickType keyboard

Suggestions and keys, phone-framed.

QWERTYUIOP
ASDFGHJKL
⇧UIOP⌫
The is what you meant to type.
Apple 09

AirPods pairing

Connect state with Adaptive Audio copy.

AirPods Pro

Connected · 84% · Adaptive Audio

Noise control adapts to your surroundings.

Apple 10

Two-factor sheet

The autofill pill, tapped once.

pUi
Verification code
PlanckUi · from now

Tap to let Messages fill the code — nothing is typed by hand.

Take one with you.

Copy any block above as HTML, or start from a widget — 280 of them, all free, no email required.

Browse the catalogSee the animations