MDX component showcase

This page demonstrates all 41 content components. Use Markdown for regular posts and .mdx when you need components.

Audio

<Audio src="/media/shortcodes/t-rex-roar.mp3" name="Sample audio" />

Bubble

<Bubble notation="A little more context">Hover for a note</Bubble>

Button

<Button url="/archives/" text="Read the posts" icon="fas fa-book" />

BVideo

<BVideo bvid="BV1GJ411x7h7" />

Card

<Card title="Project card" desc="A space to introduce your project." cover="/img/demo/cover-getting-started-v2.webp" url="/about/" tag="Theme" star={5} />

ChartJS

<ChartJS config={{type:"bar",data:{labels:["Posts","Notes","Projects"],datasets:[{label:"Content",data:[12,8,4]}]}}} description="Local sample data" />

{"type":"bar","data":{"labels":["Posts","Notes","Projects"],"datasets":[{"label":"Content","data":[12,8,4]}]}}

Checkbox

<Checkbox checked={true}>Completed task</Checkbox>

Flink

<Flink groups={[{class_name:"Official resources",link_list:[{name:"Astro",link:"https://astro.build/",avatar:"/img/logo.png",descr:"Static site framework"}]}]} />

Official resources

AstroStatic site framework

Fold

<Fold title="Expand this section">A note inside the fold.</Fold>

Gallery

<Gallery columns={2}>
<GalleryItem src="/img/demo/cover-getting-started-v2.webp" alt="Create" />
<GalleryItem src="/img/demo/cover-pagination-v2.webp" alt="Collect" />
</Gallery>

GalleryGroup

<GalleryGroup title="Explore the gallery" img="/img/demo/cover-shortcodes-v2.webp" url="/about/">A collection of moments.</GalleryGroup>

GalleryItem

<GalleryItem src="/img/demo/cover-getting-started-v2.webp" alt="Gallery image" />

Gitea

<Gitea host="https://codeberg.org" repo="forgejo/forgejo" />

gitea

forgejo

Loading repository information…

——

Loading

Gitee

<Gitee repo="mirrors/vue" />

gitee

vue

Loading repository information…

——

Loading

GitHub

<GitHub repo="withastro/astro" />

github

astro

Loading repository information…

——

Loading

GitLab

<GitLab repo="gitlab-org/gitlab" />

gitlab

gitlab

Loading repository information…

——

Loading

HideBlock

<HideBlock text="Reveal content">Hidden block content.</HideBlock>

HideInline

<HideInline text="Reveal">Hidden inline content</HideInline>

HideToggle

<HideToggle title="Toggle content">Open and close this content.</HideToggle>

Image

<Image src="/img/demo/cover-shortcodes-v2.webp" alt="Solitude component example" caption="Bundled sample image" />

InlineImage

<InlineImage src="/img/logo.png" alt="Solitude" height="32px" />

Keyboard

<Keyboard>⌘ K</Keyboard>

Label

<Label color="green">Complete</Label>

Link

<Link title="Astro" desc="Astro website" url="https://astro.build/" />

Mermaid

<Mermaid code={"graph LR\nA[Content] --> B[Astro] --> C[HTML]"} />

Note

<Note type="info">A callout with **Markdown** support.</Note>

Paragraph

<Paragraph color="blue">A paragraph with a splash of color.</Paragraph>

A paragraph with a splash of color.

Radio

<Radio checked={false}>An option</Radio>

Score

<Score score={"X:1\nT:Simple tune\nM:4/4\nL:1/4\nK:C\nC D E F | G A B c |"} />

Series

<Series name="Theme essentials" />

1. Light, dark, and custom styles
2. Make reading more accessible
3. Import content from Hugo
4. Deploy your static blog
5. Build your About page
6. Music and page navigation
7. Connect a comment service
8. Search and feeds
9. Homepage recommendations and sidebar
10. Write with Markdown and MDX
11. Configure your theme
12. Getting started with Astro Solitude

Text

<Text color="red">Something worth highlighting.</Text>

Spoiler

<Spoiler>A little spoiler</Spoiler>

Subnote

<Subnote type="success">An additional note.</Subnote>

Tab

<Tabs><Tab title="A single panel">Place Tab inside Tabs.</Tab></Tabs>

Tabs

<Tabs id="demo-tabs">
<Tab title="Markdown">Text and lists.</Tab>
<Tab title="MDX">Components and interactions.</Tab>
</Tabs>

Timeline

<Timeline title="A theme journey" color="blue">
<Timenode time="Step one" title="Create a site">Start from the template.</Timenode>
<Timenode time="Step two" title="Start writing">Publish your first post.</Timenode>
</Timeline>

Timenode

<Timeline><Timenode time="Now" title="Keep creating">Keep the moments worth sharing.</Timenode></Timeline>

Typeit

<Typeit speed={80}>Capture everyday life in words.</Typeit>

Video

<Video src="/media/shortcodes/flower.mp4" poster="/img/demo/cover-shortcodes-v2.webp" />

Videos

<Videos col={2} sources={["/media/shortcodes/flower.mp4"]} />

YouTube

<YouTube id="aqz-KE-bpKQ" />

Math formulas

MDX also supports inline formulas $E = mc^2$ and display formulas: