Components
For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
Native scrolling with subtle, macOS-like pointer scrollbars.
Scrollbars help answer two questions: is there more content, and where am I within it? However, a permanently prominent track can compete with the content. In the Monolith Design System, scrollbars are designed to be extremely subtle and stay out of the way until needed.
This foundation uses custom, cross-browser scrollbars that mimic macOS behavior. The thumb offers a direct drag target for a pointer, while the content still uses the browser's native scroll physics.
The custom scrollbar track is 10px wide, but the visible thumb is a thin 4px pill shape (rounded-full) to minimize visual noise.
When the user hovers over the scrollbar track, the thumb smoothly expands to 8px in width over a strict 150ms ease-out duration. This provides immediate, snappy tactile feedback indicating that the scrollbar is draggable, without permanently cluttering the interface.
After you add the component with the CLI, import it from your UI folder:
The component wraps Radix UI's <ScrollArea.Root>.
Our custom implementation automatically handles the padding transitions on the <ScrollBar /> component to create the thickness-changing effect.