Marketing Sections
Full-width landing page sections: hero, feature grid, logo cloud, CTA banners, and the footer.
Each of these is a whole page section, meant to be stacked to build a landing page. They're the blocks most worth copying rather than configuring: marketing layouts diverge fast, and a prop for every variation would be worse than editing the file.
Each one carries its Figma frame width as a fixed width (the hero is 1280px, the CTA banner 1263px), so they don't reflow into a narrower container. The previews below zoom the whole section down to fit this column rather than cropping it: what you see is the real composition at real proportions, just smaller than it renders at full size.
Hero
layout is Figma's own axis and a real choice, not something derivable from the copy. Centered stacks everything with a 40px display title, a full-width image below the CTAs, and an optional caption line.
Design faster. Ship sooner.
Sakani is an open-source, production-ready design system with full Figma-to-React parity, built to take you from idea to shipped interface.
Free and open source · MIT licensed
Hero, split layout
Split puts the content column beside a fixed-size image, left-aligned, at the smaller 28px title size. It takes no caption: Figma's own split export has none.
Your product, styled to production standard.
114+ components, full state coverage, real Figma-to-code parity. Everything you need to build without starting from a blank canvas.
Hero, scratch reveal
Pass revealImage alongside image and the image area becomes a canvas scratch-reveal. Drag across it to erase the pattern and expose the photo underneath. Omit it and the image stays a plain <img>, matching Figma exactly.
Design faster. Ship sooner.
Drag across the image below to scratch the pattern away.
Free and open source · MIT licensed
Feature grid
columns defaults to features.length, since that's what every one of Figma's examples does (2 features to 2 columns, 3 to 3, 4 to 4). It stays an override for the case that genuinely can't be derived: wrapping more features onto fewer columns.
Built for speed
Every component is optimized out of the box, so your interface stays fast without extra work.
Accessible by default
Keyboard navigation, focus states, and semantic markup are built in, not bolted on.
Composable by design
Every block is assembled from the same primitives your app already uses.
Token-driven theming
Swap a variable, not a stylesheet. Light and dark modes ship for free.
Logo cloud
variant is Figma's Style axis, renamed to avoid colliding with React's own style prop. Monochrome flattens every mark to one gray; color renders each in its own brand color.
Trusted by teams at
Trusted by teams at
CTA banner
On accent, both buttons switch to the light bg/subtle treatment: the banner's own background is the dark accent color, so a normal dark primary button would vanish into it. That's derived from variant rather than set per button.
Inline CTA
The smaller sibling that sits inside flowing content without interrupting it. Unlike the sections above it has no fixed frame width, so it fills whatever column you give it.
Unlock advanced analytics
Upgrade to Pro to see detailed usage trends and exports.
Still comparing options?
See how Sakani differs from copy-paste libraries.
Section footer
Default is a copyright line beside a link row; centered is a single centered line. That stays an explicit variant rather than being inferred from an empty links array, since a default footer with no links should still keep its two-column layout.
Copy the source
Blocks are composition examples, not configurable components. Rather than adding props for a layout they don't support, copy the file into your own project and edit it: change the columns, swap the sample data, delete the parts you don't need. Nothing here introduces a primitive you can't already import on its own.