← All posts
The Quill Component Gallery
Every safe component the Quill blog theme exposes to MDX, rendered in one place — callouts, figures, tables, code, and more.
This post exercises every component the Quill theme exposes to customer MDX, so you can see exactly how each one renders.
Callouts
An info callout — neutral blue, for tips and helpful context.
A warning callout — amber, for things to watch out for.
A danger callout — red, for destructive or risky operations.
Figures
Tables
| Component | Purpose | Customer-safe |
|---|---|---|
| Callout | Highlighted aside | Yes |
| Figure | Captioned image | Yes |
| Embed | Sandboxed iframe | Yes |
| YouTube | Video by id | Yes |
Blockquotes and lists
Pull quotes use the accent-tinted blockquote treatment — good for emphasising a key line.
- A bullet with
inline codein it - A bullet linking to the documentation
- A third bullet for good measure
- Ordered item one
- Ordered item two
- Ordered item three
Code blocks
// Fenced code gets a hover copy-to-clipboard button via the CodeBlock wrapper.
return `Hello, ${name}!`;
}That covers the full component surface — inline code, links, headings, and everything above.
More to read
