Components

2/10/2025

508 words

3 minutes

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!

1
<Collapse title="Click me">This is the content of the collapse.</Collapse>
2
<Collapse title="Default open!" open>
3
  Hey there, I'm opened by default!
4
</Collapse>

1
:::collapse{title="Click me"}
2
This is the content of the collapse.
3
:::
4
:::collapse{title="Default open!" open}
5
Hey there, I'm opened by default!
6
:::

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.

1
npm install foo bar

1
pnpm add foo bar

1
<Tabs>
2
  <TabItem label="Foo">This is the content of common Tab 1</TabItem>
3
  <TabItem label="Bar" active>
4
    This is the content of common Tab 2
5
  </TabItem>
6
</Tabs>
7
<Tabs>
8
  <TabItem label="Lorem">This is the content of spoiler Tab 1</TabItem>
9
  <TabItem label="Ipsum">This is the content of spoiler Tab 2</TabItem>
10
</Tabs>
11
<Tabs syncKey="test-tabs-sync">
12
  <TabItem label="Tab 1" active>
13
    This is the content of sync Tab 1, sync with next Tabs.
14
  </TabItem>
15
  <TabItem label="Tab 2">This is the content of sync Tab 2, sync with next Tabs.</TabItem>
16
</Tabs>
17
<Tabs syncKey="test-tabs-sync">
18
  <TabItem label="NPM" active>
19
    ```bash
20
    npm install foo bar
21
    ```
22
  </TabItem>
23
  <TabItem label="PNPM">
24
    ```bash
25
    pnpm add foo bar
26
    ```
27
  </TabItem>
28
</Tabs>

Repl#

Hello

1
<div>Hello</div>

1
<Repl>
2
  <div class="text-center">Hello</div>
3
  <Fragment slot="desc">
4
    ```jsx
5
    <div class="text-center">Hello</div>
6
    ```
7
  </Fragment>
8
</Repl>

LinkCard#

Astral Halo

A static blog template developed with Astro

Astro

The all-in-one web framework designed for speed.

1
<LinkCard
2
  title="Astral Halo"
3
  description="A static blog template developed with Astro"
4
  url="https://github.com/HPCesia/astral-halo"
5
/>
6
<LinkCard
7
  title="Astro"
8
  description="The all-in-one web framework designed for speed."
9
  url="https://astro.build/"
10
/>

1
::linkcard{title="Astral Halo" description="A static blog template developed with Astro" url="https://github.com/HPCesia/astral-halo"}
2
::linkcard{title="Astro" description="The all-in-one web framework designed for speed." url="https://astro.build/"}

Inline Containers#

1
<Tooltip tip="I'm here!" position="top">
2
  Hover me
3
</Tooltip>
4
<Tooltip tip="I'm here!" position="bottom">
5
  Hover me
6
</Tooltip>
7
<Tooltip tip="I'm here!" position="left">
8
  Hover me
9
</Tooltip>
10
<Tooltip tip="I'm here!" position="right">
11
  Hover me
12
</Tooltip>

1
::tooltip[Hover me]{tip="I'm here!" position="top"}
2
::tooltip[Hover me]{tip="I'm here!" position="bottom"}
3
::tooltip[Hover me]{tip="I'm here!" position="left"}
4
::tooltip[Hover me]{tip="I'm here!" position="right"}

Icon#

You can get this template in GitHubThis is an open source project A huge icon is here:

1
<span>You can get this template in <Icon name="mdi:github" />[GitHub](https://github.com/HPCesia/astral-halo)</span>
2
<span>This is an open source project <Icon name="mdi:open-source-initiative" /></span>
3
<span>A huge icon is here: <Icon name="mdi:alert-octagon" size="5em" /></span>

1
:icon{name="mdi:github"}
2
:icon{name="mdi:open-source-initiative"}
3
:icon{name="mdi:alert-octagon" size="5em"}

Ruby#

汉( hàn ) 字( zì ) 漢( ㄏㄢ ) 字( ㄗ ) 漢字( からじ )

1
<Ruby pairs={[{base: "汉", text: "hàn"}, {base: "字", text: "zì"}]} />
2
<Ruby pairs={[["漢", "ㄏㄢ"], ["字", "ㄗ"]]} />
3
<Ruby base="漢字" text="からじ" />

1
::rubyc{base="汉|字" text="hàn|zì"}
2
::rubyc{base="漢|字" text="ㄏㄢ|ㄗ"}
3
::rubyc{base="漢字" text="からじ"}

Web Contents#

RepoCard#

HPCesia/astral-halo

HPCesia/AstralHalo

gitea/awesome-gitea

1
<RepoCard repo="HPCesia/astral-halo" platform='github' />
2
<RepoCard repo="HPCesia/AstralHalo" platform='forgejo' host='https://codeberg.org' icon='simple-icons:codeberg' />
3
<RepoCard repo="gitea/awesome-gitea" platform='gitea' host='https://gitea.com' icon='simple-icons:gitea' />

Published At 2/10/2025 Author Lorem Ipsum License CC BY-NC-SA 4.0