Components

2/10/2025

464 words

2 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!

<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!
:::

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 bar

bash

pnpm add foo bar

bash

<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 slot="desc">
    ```jsx
    <div class="text-center">Hello</div>
    ```
  </Fragment>
</Repl>

jsx

LinkCard#

Astral Halo

A static blog template developed with Astro

Astro

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

<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/"}

Inline Containers#

<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"}

Icon#

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

<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"}

Web Contents#

RepoCard#

HPCesia/astral-halo

HPCesia/AstralHalo

gitea/awesome-gitea

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

jsx

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