Skip to main content
You can use these components in any .mdx file without importing them. Names are case-sensitive, so <YouTube> works while <Youtube> stops the build with Unknown component.

Callouts

Note, Tip, Info, Warning, Check, Danger, Callout

Cards and columns

Card, CardGroup, Columns

Tabs

Tabs, Tab

Steps

Steps, Step

Accordions

Accordion, AccordionGroup

Code

Code blocks, CodeGroup, syntax themes

Media

Frame, Video, YouTube

Badges and updates

Badge, Update
Two more built-ins, <SiteAreas /> and <ThemeToggle />, are meant for your own header. See Match your website. To build your own components, see Your own components.

​
Markdown

Both .md and .mdx files support GitHub-flavored Markdown: Notra typesets quotes and dashes automatically ("..." becomes ”…”, -- becomes –), but doesn’t support math or diagrams.

​
MDX differs from Markdown

Notra parses .mdx files as MDX, which is stricter than Markdown:
  • Close every tag, including empty ones like <br /> and <img src="/a.png" />.
  • Use {/* comment */} instead of <!-- comment -->.
  • Escape a literal < or { in text as \< and \{, or put it in backticks.
The build points to the line of every MDX syntax error, and if a file has no components, name it .md so none of these rules apply.

​
Not allowed in content

<script> tags stop the build in both .md and .mdx. Put JavaScript in script.js or in a component.

​
Styling inside components

Built-in components bring their own compact styles instead of the post’s text styles, so keep to short paragraphs, bold, links and inline code inside them. Lists, headings and tables inside a callout, card, step, tab or accordion render without the post’s styling, and code blocks inside them don’t get the copy button. Each component carries a stable class name you can target from your own CSS, listed on each component’s page. See Design and CSS.
Last modified on October 8, 2026