UI Components

Below you will find examples of all the formats you can use in your Markdown documentation

Colors

Generated using tints.dev and Tailwind CSS Default Colors Theme.

Codeblocks

Using Shiki for syntax highlighting.

echo "Hello World"

```bash
echo "Hello World"
```

Images

Images

There are two ways to add images to your documentation:

• Using Markdown syntax:

![Docshub Logo](/images/docshub.jpg)

• Using the <Image> Astro Component:

---
title: My Docshub Page
---

<Image src="/images/docshub.jpg" width="64" height="64" alt="Docshub Logo" />

Document Card

Add a card that redirects to a document in your application. It receives the documentSlug parameter, which refers to the filename of the document.

<!-- example: src/docs/getting-started.mdx -->
<DocumentCard documentSlug="getting-started" />

Endpoint

https://example.com/end/point/resource

// Your markdown code here

<Endpoint
  method="GET"
  title="Example endpoint title"
  description="Example endpoint description"
  label="STABLE"
>
  // Code
</Endpoint>

• Method properties:

export type Method = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";

• Label properties:

export type Label = "DEPRECATED" | "BETA" | "ALPHA" | "STABLE";

UI Block

 <UiBlock component="component" title="Component Block Title">
  Your Astro or React component here
 </UiBlock>

• component properties:

type Component = "palette" | "mermaid" | "component";

Alert

<Alert type="warning">Example message</Alert>

• type properties:

export type AlertType = "success" | "error" | "warning" | "info";

Link

[Astro Framework](https://astro.build/).

Table

| Column 1      | Column 2      | Column 3      |
| ------------- | ------------- | ------------- |
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 |

Headings

Use # to define different levels of headings (from h1 to h4).

## Heading Level 1

### Heading Level 2

#### Heading Level 3

Text

Normal
**Bold**
_Italic_
~~Strikethrough~~

Lists

1.  First item
2.  Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
3.  Third item