Components
Show More
Clamps long content behind an explicit expand.
Default
Every glyph in buena mono occupies a fixed 618-unit cell, so columns stay aligned no matter what you type. The width was chosen to keep code dense without crowding punctuation. Box-drawing characters, arrows, and ligature substitutes all snap to the same grid. Nothing shifts when you swap a character — the layout is the layout.
const [expanded, setExpanded] = useState(false);
<p className={expanded ? "" : "max-h-10 overflow-hidden"}>…</p>
{!expanded && <div className="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-bg-elevated" />}
<button onClick={() => setExpanded((v) => !v)}>
{expanded ? "Show less" : "Show more"}
</button>No border
Every glyph in buena mono occupies a fixed 618-unit cell, so columns stay aligned no matter what you type. The width was chosen to keep code dense without crowding punctuation. Box-drawing characters, arrows, and ligature substitutes all snap to the same grid. Nothing shifts when you swap a character — the layout is the layout.
Drop the card frame for inline body copy — the fade now blends into the page surface instead of an elevated panel.
Settings panel
Publishing settings
Applied to every new release.
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger>…</CollapsibleTrigger>
<Row>Post to changelog <Switch defaultChecked /></Row>
<CollapsibleContent>
<Row>Email subscribers <Switch defaultChecked /></Row>
<Row>Cross-post to social <Switch /></Row>
</CollapsibleContent>
</Collapsible>
The Collapsible primitive as a settings panel: the
first row stays visible while advanced options fold away behind the toggle.
File tree
function Folder({ name, children }) {
return (
<Collapsible>
<CollapsibleTrigger>
<ChevronRight className="[&[data-panel-open]]:rotate-90" />
<FolderIcon /> {name}
</CollapsibleTrigger>
<CollapsibleContent className="ml-3 border-l pl-2">
{children /* nested folders + files */}
</CollapsibleContent>
</Collapsible>
);
}
Nested Collapsibles build a file tree: each folder expands
to reveal children while files are static leaves, and the chevron rotates on
data-panel-open.
Markdown for agents: /design/show-more.md · spec: /design.md