mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
6c53a28e3a
* Document className and Tailwind arbitrary value support All built-in components now accept a className prop (mint#10540), and dynamic Tailwind utilities work in className on MDX components (mint#6737). Two pages stated the opposite. - Correct the claims that Tailwind arbitrary values are unsupported in customize/custom-scripts and guides/custom-layouts - Add className and arbitrary value guidance to the Tailwind section of custom-scripts, including the runtime-class limitation and the Tab content-panel caveat - Add a Style components section to the components overview - Add className property rows to every component reference page that supports it, and note the three components that do not - Document inline Markdown support in component title props - Correct the callouts page, which said typed callouts accept only children - Replace inline style resizing with Tailwind classes in image embeds - Add a help center article for Tailwind classes not applying in the editor's live preview, and note the limitation in custom-layouts - Point skill.md at className before custom.css - Accept className, keyframes, and unstyled in the Vale vocabulary Resolves DOC-316, DOC-317 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * Apply batched suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> * Apply batched suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
152 lines
4.8 KiB
Plaintext
152 lines
4.8 KiB
Plaintext
---
|
|
title: "Components overview"
|
|
description: "Browse the full Mintlify component library for layout, emphasis, API documentation, and navigation elements available in your MDX pages."
|
|
keywords:
|
|
["MDX components", "documentation components", "UI components", "components"]
|
|
boost: 3
|
|
---
|
|
|
|
Mintlify provides built-in MDX components for your documentation pages. Use these components to structure content, draw attention to important information, document APIs, and guide navigation.
|
|
|
|
## Structure your content
|
|
|
|
<Card title="Tabs" icon="folder" href="/components/tabs">
|
|
Organize related content into switchable tabbed views.
|
|
</Card>
|
|
|
|
<Card title="Code groups" icon="code" href="/components/code-groups">
|
|
Display code examples in multiple languages.
|
|
</Card>
|
|
|
|
<Card title="Steps" icon="list-ordered" href="/components/steps">
|
|
Display sequential instructions in a numbered format.
|
|
</Card>
|
|
|
|
<Card title="Columns" icon="columns-3" href="/components/columns">
|
|
Arrange content side by side in responsive layouts.
|
|
</Card>
|
|
|
|
<Card title="Panel" icon="panel-right" href="/components/panel">
|
|
Create sidebar panels for supplementary content.
|
|
</Card>
|
|
|
|
## Draw attention
|
|
|
|
<Card
|
|
title="Callouts"
|
|
icon="message-square-warning"
|
|
href="/components/callouts"
|
|
>
|
|
Emphasize important information with styled alerts.
|
|
</Card>
|
|
|
|
<Card title="Banner" icon="flag" href="/components/banner">
|
|
Display prominent announcements at the top of pages.
|
|
</Card>
|
|
|
|
<Card title="Badge" icon="award" href="/components/badge">
|
|
Add inline labels and status indicators.
|
|
</Card>
|
|
|
|
<Card title="Update" icon="bell" href="/components/update">
|
|
Highlight new or updated content.
|
|
</Card>
|
|
|
|
<Card title="Frames" icon="frame" href="/components/frames">
|
|
Add borders and styling to images and content.
|
|
</Card>
|
|
|
|
<Card title="Tooltips" icon="message-circle" href="/components/tooltips">
|
|
Display additional information on hover.
|
|
</Card>
|
|
|
|
## Showcase AI prompts
|
|
|
|
<Card title="Prompt" icon="sparkles" href="/components/prompt">
|
|
Display copyable AI prompts with Cursor integration.
|
|
</Card>
|
|
|
|
## Show and hide content
|
|
|
|
<Card title="Accordions" icon="chevron-down" href="/components/accordions">
|
|
Expandable sections for progressive disclosure of content.
|
|
</Card>
|
|
|
|
<Card title="Expandables" icon="chevrons-down" href="/components/expandables">
|
|
Show and hide detailed content on demand.
|
|
</Card>
|
|
|
|
<Card title="View" icon="eye" href="/components/view">
|
|
Conditionally show content based on context.
|
|
</Card>
|
|
|
|
<Card title="MDX" icon="braces" href="/components/mdx">
|
|
Render Markdown inside JSX expressions and conditionals.
|
|
</Card>
|
|
|
|
<Card title="Visibility" icon="eye-off" href="/components/visibility">
|
|
Control content shown to humans versus AI agents.
|
|
</Card>
|
|
|
|
## Document your API
|
|
|
|
<Card title="Fields" icon="text-cursor-input" href="/components/fields">
|
|
Display parameter and property definitions.
|
|
</Card>
|
|
|
|
<Card title="Responses" icon="arrow-left-right" href="/components/responses">
|
|
Document API response structures and fields.
|
|
</Card>
|
|
|
|
<Card title="Examples" icon="file-code" href="/components/examples">
|
|
Show request and response examples side by side.
|
|
</Card>
|
|
|
|
## Link to other pages
|
|
|
|
<Card title="Cards" icon="square" href="/components/cards">
|
|
Highlight content with customizable containers and icons.
|
|
</Card>
|
|
|
|
<Card title="Tiles" icon="layout-grid" href="/components/tiles">
|
|
Display content in a grid of clickable tiles.
|
|
</Card>
|
|
|
|
## Add visual context
|
|
|
|
<Card title="Icons" icon="smile" href="/components/icons">
|
|
Add visual indicators using the Lucide icon library.
|
|
</Card>
|
|
|
|
<Card
|
|
title="Mermaid diagrams"
|
|
icon="git-branch"
|
|
href="/components/mermaid-diagrams"
|
|
>
|
|
Create flowcharts, sequence diagrams, and more.
|
|
</Card>
|
|
|
|
<Card title="Color" icon="palette" href="/components/color">
|
|
Display color swatches with hex values.
|
|
</Card>
|
|
|
|
<Card title="Tree" icon="folder-tree" href="/components/tree">
|
|
Display hierarchical file and folder structures.
|
|
</Card>
|
|
|
|
<Card title="GitHub" icon="github" href="/components/github">
|
|
Embed a GitHub repository card with live stars and forks.
|
|
</Card>
|
|
|
|
## Style components
|
|
|
|
All built-in components accept a `className` prop. Mintlify merges your classes with the component's own styles, so you can restyle a single instance without wrapping it in extra markup or writing a CSS override.
|
|
|
|
```mdx className example
|
|
<Note className="mt-0">This callout has no top margin.</Note>
|
|
```
|
|
|
|
Use [Tailwind CSS](/customize/custom-scripts#style-with-tailwind-css) classes, including [arbitrary values](/customize/custom-scripts#arbitrary-values-and-variants) such as `w-[350px]`, or class names that you define in a [custom CSS file](/customize/custom-scripts#add-custom-css).
|
|
|
|
[Banner](/components/banner), [MDX](/components/mdx), and [Visibility](/components/visibility) do not accept `className`. You configure the banner in `docs.json`, and the other two render their children without a wrapper element.
|