Components let you easily reuse a piece of UI or styling consistently. You can use them not just in .astro files, but also in .mdx files.
TIP
MDX is a format that lets you write JSX embedded inside Markdown. And it has no difference with markdown files in other ways.
TIP
Some components are both available in .md and .mdx files, but some are only available in .mdx files. In .md files, you can use components with remark-directive. Components that available in .md files will have a md tab in the example.
Containers#
Collapse#
Click me
This is the content of the collapse.
Default open!
Hey there, I’m opened by default!
<Collapse title="Click me">This is the content of the collapse.</Collapse>
<Collapse title="Default open!" open>
Hey there, I'm opened by default!
</Collapse>jsx
:::collapse{title="Click me"}
This is the content of the collapse.
:::
:::collapse{title="Default open!" open}
Hey there, I'm opened by default!
:::md
Tabs#
This is the content of common Tab 1
This is the content of common Tab 2
This is the content of spoiler Tab 1
This is the content of spoiler Tab 2
This is the content of sync Tab 1, sync with next Tabs.
This is the content of sync Tab 2, sync with next Tabs.
npm install foo barbash
pnpm add foo barbash
<Tabs>
<TabItem label="Foo">This is the content of common Tab 1</TabItem>
<TabItem label="Bar" active>
This is the content of common Tab 2
</TabItem>
</Tabs>
<Tabs>
<TabItem label="Lorem">This is the content of spoiler Tab 1</TabItem>
<TabItem label="Ipsum">This is the content of spoiler Tab 2</TabItem>
</Tabs>
<Tabs syncKey="test-tabs-sync">
<TabItem label="Tab 1" active>
This is the content of sync Tab 1, sync with next Tabs.
</TabItem>
<TabItem label="Tab 2">This is the content of sync Tab 2, sync with next Tabs.</TabItem>
</Tabs>
<Tabs syncKey="test-tabs-sync">
<TabItem label="NPM" active>
```bash
npm install foo bar
```
</TabItem>
<TabItem label="PNPM">
```bash
pnpm add foo bar
```
</TabItem>
</Tabs>jsx
Repl#
Hello
<div>Hello</div>jsx
<Repl>
<div class="text-center">Hello</div>
<Fragment>
```jsx
<div class="text-center">Hello</div>
```
</Fragment>
</Repl>jsx
Inline Containers#
Tooltip#
Hover me
Hover me
Hover me
Hover me
<Tooltip tip="I'm here!" position="top">
Hover me
</Tooltip>
<Tooltip tip="I'm here!" position="bottom">
Hover me
</Tooltip>
<Tooltip tip="I'm here!" position="left">
Hover me
</Tooltip>
<Tooltip tip="I'm here!" position="right">
Hover me
</Tooltip>jsx
::tooltip[Hover me]{tip="I'm here!" position="top"}
::tooltip[Hover me]{tip="I'm here!" position="bottom"}
::tooltip[Hover me]{tip="I'm here!" position="left"}
::tooltip[Hover me]{tip="I'm here!" position="right"}md
Icon#
<span>You can get this template in <Icon name="mdi:github" />[GitHub](https://github.com/HPCesia/astral-halo)</span>
<span>This is an open source project <Icon name="mdi:open-source-initiative" /></span>
<span>A huge icon is here: <Icon name="mdi:alert-octagon" size="5em" /></span>jsx
:icon{name="mdi:github"}
:icon{name="mdi:open-source-initiative"}
:icon{name="mdi:alert-octagon" size="5em"}md
Web Contents#
RepoCard#
<RepoCard repo="HPCesia/astral-halo" platform='github' />
<RepoCard repo="withastro/astro" platform='github' />jsx
LinkCard#
<LinkCard
title="Astral Halo"
description="A static blog template developed with Astro"
url="https://github.com/HPCesia/astral-halo"
/>
<LinkCard
title="Astro"
description="The all-in-one web framework designed for speed."
url="https://astro.build/"
/>jsx
::linkcard{title="Astral Halo" description="A static blog template developed with Astro" url="https://github.com/HPCesia/astral-halo"}
::linkcard{title="Astro" description="The all-in-one web framework designed for speed." url="https://astro.build/"}md