Content and editor blocks
The group with the most surface per block: an editor, an assistant, a code window, a gallery and a disclosure. What they have in common is that the content is the interface — the block's job is to get out of its way.
5 families, 22 blocks#
- Rich Editor6 blocksContent tools, comments, knowledge bases
- AI Chat3 blocksAssistants, copilots and writing help inside a product
- Snippet code4 blocksDocs, developer tools, changelogs
- Carousels2 blocksHero galleries, testimonials, product shots
- Accordion7 blocksMarketing pages, pricing FAQs, settings panels
What these are for#
An editor is the most demanding component most products ever ship. Selection, paste from elsewhere, undo across composite actions, mobile keyboards, and a toolbar whose state has to follow the cursor — all of it happening in a surface the reader is typing into. The editor blocks here cover the composition and the toolbar states; the document model underneath stays yours, because it belongs to whatever you are storing.
An assistant is an editor with a second author. The AI chat blocks carry the states that make one trustworthy: a thinking state that says what it is doing, a reply that streams so the wait reads as work, numbered sources beside every claim, and a rewrite that is shown before it replaces anything a person wrote. The model behind it stays yours; the blocks are the surface it answers through.
Code snippets look decorative and are not: they are read by people who will copy and run them. What matters is that the copy button copies exactly what is on screen, that horizontal scrolling is visible when a line is long rather than hidden, and that highlighting does not change what the text says. Every code block here scrolls with a visible bar for exactly that reason.
Accordions and carousels both hide content behind an interaction, and both are worth suspicion. Content behind a click is content most readers will not see, which is fine for a set of questions where each reader wants one, and actively harmful for anything you need them to read. The block is well built; the judgement about whether to use it is yours.
Choosing between them#
Accordion or just showing everything?
Show everything unless the list is long and each reader wants one item from it. A pricing FAQ is the right case: ten questions, each reader has one. A three-paragraph explanation split into three accordion panels is the wrong case — you have added a click before every paragraph and hidden two thirds of the page from anyone scanning it, including a reader who would have found their answer by looking.
Carousel or a grid?
A grid, almost always. Items past the first slide of a carousel are seen by a small fraction of readers, so a carousel is a way of publishing content and then hiding most of it. It earns its place where the items are genuinely alternatives to each other and space is genuinely short — product photographs of one item, a phone-width gallery — and not as a way of fitting six equally important things into the space for two.
Rich editor or plain text area?
Ask whether formatting changes the meaning of what is being written. A comment, a status update or a search prompt does not need bold, and offering it invites readers to spend time on decoration in a field nobody will read twice. A document, an article or a knowledge-base entry does, and a plain text area for one of those turns into somebody inventing a markup convention of their own.
Questions#
Which editor engine does the rich editor use?
The blocks cover the composition — the toolbar, its states, the body surface, the comment composer — rather than shipping a document model. That is deliberate: the model belongs with your storage and your collaboration choices, and a block that dictated it would be wrong for any project that had already chosen.
Is the code block's highlighting configurable?
The palette is token-based like everything else here, so highlighting follows your theme rather than carrying its own. The blocks cover the window chrome, the copy affordance and the line numbering; which grammar tokenises the source is yours to pass in.
Are the carousels accessible?
They are keyboard-reachable, they announce position, and they do not move on their own, which is the single most important property — an auto-advancing carousel moves content out from under anyone reading slowly, using a screen reader, or operating it by keyboard. If you need motion, it belongs on a control the reader pressed.