Admonitions
Trellis Docs uses custom SVG admonition icons, giving each type a distinct visual identity.
Admonition types
Note — use for supplementary information that adds context.
Tip — use for best practices and recommendations.
Info — use for important context the reader should be aware of.
Caution — use for things that could cause issues if ignored.
Danger — use for critical warnings about data loss, security, or breaking changes.
Syntax
Admonitions use the standard ::: syntax:
:::note
This is a note.
:::
:::tip
This is a tip.
:::
:::info
This is informational.
:::
:::caution
Be careful with this.
:::
:::danger
This is critical — read carefully.
:::Custom titles
Add a custom title after the type:
:::tip Best Practice
Always run `npm run build` before deploying.
:::Always run npm run build before deploying.
How the icons work
All admonition icons and layout are defined in a single file: components/docs/mdx/callout.tsx. Each type (note, tip, info, caution, danger, warning) has a dedicated inline SVG stored in an icons record:
const icons: Record<string, React.ReactNode> = {
note: (
<svg viewBox="0 0 14 16" width="16" height="16" fill="currentColor">
<path fillRule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7..." />
</svg>
),
tip: ( /* lightbulb icon */ ),
info: ( /* info circle icon */ ),
caution: ( /* warning triangle icon */ ),
danger: ( /* fire/flame icon */ ),
}To customize an icon, edit the corresponding SVG in the icons record.
Layout
The Callout component renders the container, icon, optional title, and content. Admonition type determines the accent color via a styles record that maps each type to Tailwind classes:
const styles: Record<string, { border: string; bg: string; text: string }> = {
note: { border: 'border-blue-500', bg: 'bg-blue-500/10', text: 'text-blue-500' },
tip: { border: 'border-green-500', bg: 'bg-green-500/10', text: 'text-green-500' },
// ... etc.
}The ::: syntax in MDX is processed by a custom remark plugin (lib/remark-callout.ts) that converts directive nodes into <Callout> components during rendering.