Skip to content
Start free

Paste the section. Keep your classes.

The same section in Webflow, Figma, and code, on the classes the site already has. Built for teams comparing Relume, Flowbase, BRIX, and other Webflow component kits. A button named button stays button.

Move the cursor. Every frame is a section from the gallery.
One spec. Six outputs.
Webflow
Figma
React
Astro
HTML
Vanilla JS

Same button. The class the site already has.

One button spec, pasted three ways. Click the card to see the next one.

A Webflow selector with the classes button and is-primary

Client-First

button is-primary. The names a Finsweet site already uses.

A Webflow selector with the classes button and button--primary

BEM

button button--primary. Block and modifier, the way a code team writes it.

A Webflow selector reusing the class button instead of creating button 2

Class Sync

The site already has a class named button, so the paste uses it. Webflow does not get to name it button 2.

Pick it. Paste it.

One section from the gallery, three places it can land.

Pick a section

Every card in the gallery is visible. 20 sections copy free, in Client-First, with the Webflow paste.

Screenshot of the Hero / Product tour section

Paste in Webflow

Copy to Webflow in a normal Chrome tab, then paste in the Designer. One footer snippet runs the motion.

Screenshot of the Bento / Mosaic section

Or build it in Figma

Copy for Figma, then paste into the Blokset plugin. It builds the component in the open file.

Screenshot of the Pricing / Plan builder section

Or add it as code

blokset add hero-05 --target react. Typed props, the same motion, the class names the project already uses.

Screenshot of the Trust / Permissions matrix section

Blokset

One spec. The stack the project already uses.