Components

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>

FileTree#

1
<FileTree
2
  files={[
3
    {
4
      name: "src",
5
      children: [
6
        { name: "components", children: ["Button.astro", "Card.astro"] },
7
        { name: "layouts", children: ["BaseLayout.astro"] },
8
        { name: "pages", children: ["index.astro", "about.astro"] },
9
      ],
10
    },
11
    { name: "public", children: ["favicon.ico", "robots.txt"] },
12
    ".gitignore",
13
    "astro.config.mjs",
14
    "package.json",
15
    "README.md",
16
  ]}
17
/>

1
:::filetree
2
- src
3
  - components
4
    - Button.astro
5
    - Card.astro
6
  - layouts
7
    - BaseLayout.astro
8
  - pages
9
    - index.astro
10
    - about.astro
11
- public
12
  - favicon.ico
13
  - robots.txt
14
- .gitignore
15
- astro.config.mjs
16
- package.json
17
- README.md
18
:::

note

FileTree has an optional open prop for both .mdx and .md components to make the tree expanded by default.

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#

LinkCard#

1
<LinkCard url="https://codeberg.org/HPCesia" />
2
<LinkCard
3
  url="https://codeberg.org/HPCesia/AstralHalo"
4
  title="Astral Halo"
5
/>
6
<LinkCard
7
  title="Astro"
8
  description="The all-in-one web framework designed for speed."
9
  favicon = "https://astro.build/favicon.svg"
10
  image = "https://astro.build/og/astro.jpg"
11
  url="https://astro.build/"
12
/>

1
::linkcard{url="https://codeberg.org/HPCesia"}
2
::linkcard{url="https://codeberg.org/HPCesia/AstralHalo" title="Astral Halo"}
3
::linkcard{title="Astro" description="The all-in-one web framework designed for speed." favicon="https://astro.build/favicon.svg" image="https://astro.build/og/astro.jpg" url="https://astro.build/"}

tip

LinkCard’s preview data is fetched on build time, the output is static.

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' />