Content Sections
Testimonials, FAQ, team, careers, and a blog index — the sections a marketing site fills with real content.
Where the marketing sections are mostly layout, these are data-driven: each takes an array and renders the matching component per entry, so they map cleanly onto whatever your CMS returns.
Testimonials
The layout follows the data: one testimonial renders Figma's large single-quote style, two or more switch to the grid.
Sakani cut our design-to-dev handoff time in half. Every component already matches what ships — no more guessing at spacing or states.
Amara Kalu
Head of Product, Fintra
The state coverage alone saved us weeks — every error and loading case was already thought through.
Ravi Menon
Founder, Loopline
Figma and code finally stay in sync. No more components drifting apart after a sprint.
Chidi Duru
Design Lead, Bexa
We shipped our MVP in three weeks using Sakani blocks instead of building from scratch.
Jade Silva
Engineer, Northstack
FAQ
defaultOpen on the first item saves the reader a click and shows the answers are short — worth doing unless the list is long enough that an open item hides the rest.
Frequently asked questions
Team and careers
The item types extend the underlying component's own props — TeamSectionMember is TeamCard's props plus an id, and CareersJob is JobListing's minus layout. Anything you can pass the component, you can pass through the block.
The people building Sakani
A small, distributed team focused on making one design system genuinely excellent.
Come build with us
We're a small, remote-friendly team. Here's what's open right now.
Senior Product Designer
Lead end-to-end product design from discovery through delivery, shaping intuitive experiences that drive business impact.
Staff Engineer, Design Systems
Own the architecture of our component library and drive Figma-to-code parity across the product.
Content Marketing Lead
Shape the voice and editorial strategy behind our blog, docs, and product launches.
Blog index
From the blog
Notes on building, maintaining, and scaling a real design system.
The complete guide to building a design system that survives year two
A practical breakdown of tokens, governance, and the maintenance work most teams underestimate.
Token-driven theming, explained
Why every color should be a variable, not a hex code.
How we review component PRs
The checklist we run before anything ships to the library.
Figma-to-code parity, in practice
What it actually takes to keep design and code from drifting apart.
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.
Why it works this way
Why
- Where the marketing sections are mostly layout, these are data-driven: each takes an array and renders the matching component per entry, so they map onto whatever a CMS returns.
- One testimonial renders the large single-quote style; two or more switch to the grid, so the layout follows the data.
- Item types extend the underlying component's props, so anything you can pass the component you can pass through the block.
Don't
- Don't set defaultOpen on a FAQ long enough that an open item hides the rest.