Ideally use same colours as the Tooltip's popup box.

Support global groups in <Tabs> components to allow switching all tab groups on a page to a particular tab in one click.
This can be useful for setup instructions with multiple platforms or libraries that support multiple options.
For example, choosing a platform (say Web modular API) in the firebase docs switches all tab components to Web modular API so the user doesn't have to make the same selection over and over again.

This can be implemented with an optional tabs-group prop on the <Tabs> component, and an optional tab-id prop on the <Tab> component that defaults to title prop if the parent <Tabs> component has tabs-group set.

Images are already rendered correctly but the types need to be updated.

For reference: Images will only render correctly on Mintlify if the file paths are absolute. Relative file paths are not resolved correctly in production. We are working on that MDX parsing problem in the mint repo.

Summary

Card right now only accepts icons. However, a true Card should have an image property that sits above the card and covers the entire spacing like so

Likely need to increase the z-index to make it show up over the navigation bar in mint

We want mint to send analytics events when the user copies from a code block.

We need an optional prop on the CodeBlock and CodeGroup component that runs whenever the clipboard is clicked. The event should have name and code as event properties.

We tried using separate colors in mint for the code block's copy tooltip but it looked odd having the color change when you click.

We should use the same hex color for both and delete the copiedTooltipColor prop.

You can't type a hyphen -

This requires you to use the built-in input arrows to put negative numbers instead.

Same idea as this PR: https://github.com/mintlify/mint/pull/357 but in this repo

Summary

Support GraphQL-type interface for the API playground

Mermaid is an excellent, markdown-powered diagramming tool that allows authors to user journeys, flowcharts, class diagrams, and more directly from their own markdown codeblocks. Gitlab has integrated with mermaid to allow for the generation of charts in issue descriptions and comments, and our team uses it very often.

We'd love to see mermaid integrated into Mintlify, and added bonus if it automatically matches the theme colors and fonts from the rest of the documentation website. It would be a great way to easily integrate graph and flow chart features into more complex documentation that is otherwise hard to maintain.

https://mermaid.js.org/

Goal

Our callouts always have an icon.

We want to let users make a frame without an icon.

You can use the Callout Template code and pass different props to it.

Schema

<ColorFrame borderColor={hexcode} backgroundColor={hexcode} />

Update the dependency and verify everything is working correctly.

None of the primary maintainers of this repo are experts in tree-shaking. We would appreciate someone taking a look and making sure tree-shaking is set up correctly. The package has a lot of components and we don't want them being imported on pages that don't use them.

Add a backgroundColor prop to the Card that takes in a color and sets the background colors

See Select Library menu:

Developers frequently need to show images side by side. That's fine on regular websites but manually specifying widths and padding is annoying when you just want to write docs.

We want to provide components that lets Mintlify users show multiple images side by side taking up equal amounts of space. For example:

<ImageRow count={2}>
  <img />
  <img />
</Row>

Should show two images side by side like on this page. The HTML for those two images is:

<div className="flex flex-row justify-between">
  <img src="/img/activity_small.png" width={"48%"} />
  <img src="/img/sleep_small.png" width={"48%"} />
</div>

However, we cannot directly modify child components inside the proposed ImageRow component. Whoever attempts this could use the children: variant to modify the CSS of Row's children like we do in CodeBlock

Aria labels are important for making our components accessible.