Components

2/10/2025

260 words

1 minute

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.

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

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={true}>
    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={true}>
    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={true}>
    ```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

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

Containers