Using components
Compose MDX documentation with Monoline Docs authoring components for steps, code examples, cards and reference tables. Browse examples and API references.
On this page
Use Markdown for prose, headings, lists, links, tables and fenced code. Choose MDX when a page needs reusable structure such as installation steps, topic cards or package-manager tabs.
Import into MDX
---
title: Install your project
---
import PackageInstall from "@chitrank2050/monoline-docs/components/PackageInstall.astro"
<PackageInstall id="install-project" name="your-package" />Component names and paths match the public imports. The id identifies a group within the page; keep it unique.
Choose by documentation task
| Task | Components |
|---|---|
| Guide readers through a procedure | Steps + Step |
| Offer related topics | CardGrid + Card or LinkCard |
| Show commands for multiple package managers | PackageInstall or CodeGroup |
| Document structured settings | Table |
| Explain a project structure | FileTree |
| Show example output with source | Preview + CodeBlock |
Compose a guide
- Write a Markdown page with a clear title and a single purpose.
Add a component only when its structure helps readers complete the task.
- Preview the page, check its links and build production output.
Read Getting started for a complete procedure using these components in context.
Explore authoring tools
Static content and interactions
Astro components render as HTML. Native disclosures work without JavaScript; tabs and copy controls enhance the page through the shared script. React is optional for custom hydrated examples—see Writing pages.
Preview examples keep link activation and form submission on the current page when JavaScript is available. This protects the demonstration; ordinary links outside previews navigate normally.