Skip to main content
Mintlify components work directly in your MDX files without imports. This page shows each component rendered so you can see what’s available. For all available components, see the Mintlify documentation.

​
Cards

Use cards to link to related content or highlight key actions.

Quickstart

Get your dev environment set up in minutes.
 Use Columns to arrange cards in a grid:

First card

Cards can contain short descriptions.

Second card

Arrange cards in columns for scannability.

​
Accordions

Use accordions to collapse content that isn’t needed on every visit.
Pages are written in MDX, which combines Markdown with JSX components.
No. Mintlify components are available globally in all MDX files.

​
Steps

Use steps for sequential instructions.
1

Create a file

Add a new .mdx file to the docs/ directory.
2

Add frontmatter

Include title and description in the YAML frontmatter.
3

Update navigation

Add the page path to docs.json.

​
Tabs

Use tabs to present alternative content in the same space. 
npm install

​
Code blocks

Fenced code blocks support syntax highlighting and titles.
example.ts
interface User {
  id: string;
  name: string;
  email: string;
}

function getUser(id: string): User {
  return { id, name: "Ada Lovelace", email: "ada@example.com" };
}
Group related code blocks with CodeGroup: 
npm run dev

​
Callouts

Use callouts to draw attention to specific information.
Notes provide additional context that’s helpful but not critical.
Tips suggest best practices or useful shortcuts.
Warnings flag potential problems or destructive actions.