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

Pro

For sites that need the badge gone.

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

Studio

For agencies shipping client sites.

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

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.

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.

Take one with you.

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