> For AI agents: the site index is available at https://www.juniortree.com/llms.txt; this page is available as Markdown at https://www.juniortree.com/docs/integrations/components.md.
> Easily extend your content page more interactive

## Page metadata

- **Source URL:** https://www.juniortree.com/docs/integrations/components

# User 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](https://mdxjs.com/) is a format that lets you write JSX embedded inside Markdown. And it has no difference with markdown files in other ways.

For `.astro`, you can directly import and use components and use. An example will also shown in the first section.

**tip:**

If you always import some components in your contents, you can use [astro-auto-import](https://github.com/delucis/astro-auto-import/tree/main/packages/astro-auto-import) to automatically import them instead of manually importing them in every file.

## Containers

### Card

  You can even contain a list here

#### MDX

```jsx
import { Card } from 'astro-pure/user'

<Card
  as='a'
  href='#card'
  heading='Lorem ipsum'
  subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei.'
  date='August 2021'
>
  You can even contain a list here
</Card>
```

#### Astro

```astro
---
import { Card } from 'astro-pure/user'
---
<!-- ... -->
<Card
  as='a'
  href='#card'
  heading='Lorem ipsum'
  subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei.'
  date='August 2021'
>
  You can even contain a list here
</Card>
```

### Collapse

**Lorem ipsum:**
Lorem ipsum dolor sit amet, vidit suscipit at mei.

**Lorem ipsum:**

  <div slot='before' class='mt-2'>Are you sure you want to see?</div>
  <div>Lorem ipsum dolor sit amet, vidit suscipit at mei.</div>

```jsx
import { Collapse } from 'astro-pure/user'

<Collapse title='Lorem ipsum'> Lorem ipsum dolor sit amet, vidit suscipit at mei. </Collapse>
<Collapse title='Lorem ipsum'>
  <div slot='before' class='mt-2'>Are you sure you want to see?</div>
  <div>Lorem ipsum dolor sit amet, vidit suscipit at mei.</div>
</Collapse>
```

### Aside

**Note:**
No type selected will default to 'note'. 😉

**tip:**

Other content is also supported in aside! 😍

```js
// A code snippet, for example.
```

**You should know it!:**
Is your code buggy again? 🤨

**danger:**
Have you used `rm -rf` to clean your computer? 😡

  ```jsx
  import { Aside } from 'astro-pure/user'

  <Aside>No type selected will default to 'note'. 😉</Aside>
  <Aside type="tip">
  Other content is also supported in aside! 😍

  // ```js
  // A code snippet, for example.
  // ```
  </Aside>
  <Aside type='caution' title='You should know it!'>Is your code buggy again? 🤨</Aside>
  <Aside type='danger'>Have you used `rm -rf` to clean your computer? 😡</Aside>
  ```

This component also has a remark support version (which can directly use in `.md`), but not integrated in this theme. You can check [packages/starlight/integrations/asides.ts](https://github.com/withastro/starlight/blob/main/packages/starlight/integrations/asides.ts) for reference code.

```md
:::tip
This theme author is a good guy.
:::
```

### Tabs

#### Stars
Sirius, Vega, Betelgeuse

#### Moons
Io, Europa, Ganymede

  ```jsx
  import { Tabs, TabItem } from 'astro-pure/user';

  <Tabs>
    <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
    <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
  </Tabs>
  ```

### MDX Repl

  <p>Hello</p>

    ```html
    <p>Hello</p>
    ```

  ````jsx
  import { MdxRepl } from 'astro-pure/user'

  // Width is optional; using width parameter to set
  // all elements inside the MDX Repl component.
  // (slot desc is not included this parameter)
  <MdxRepl width='100%'>
  <p>Hello</p>
  <Fragment slot='desc'>
    ```html
    <p>Hello</p>
    ```
  </Fragment>
  </MdxRepl>
  ````

You can combine any other components for the sclot `desc`. And `<Fragment>` will not be rendered as a parent html container tag.

## List

### CardList

  ```jsx
  import { CardList } from 'astro-pure/user'

  <CardList title='A list' list={
    [{title: 'I am hidden!'}]
  } collapse />
  <CardList title='A list' list={
    [
      { title: 'Lorem ipsum', link: '#list' },
      { title: 'Dolor sit amet', children: [{
        title: 'Vidit suscipit', link: '#'
      }] }
    ]
  } />
  ```

### Timeline

World!</i>' },
  ]
} />

  ```jsx
  import { Timeline } from 'astro-pure/user'

  <Timeline events={
    [
      { date: 'August 2021', content: 'Hello' },
      { date: 'August 2022', content: '<i>World!</i>' },
    ]
  } />
  ```

### Steps

<div>

How to Yi Jian San Lian:

1. Dian Zan
2. Tou Bi
3. Shou Cang

   Or GuanZhu sometimes.

</div>

  ```jsx
  import { Steps } from 'astro-pure/user'

  How to Yi Jian San Lian:

  <Steps>
  1. Dian Zan
  2. Tou Bi
  3. Shou Cang

    Or GuanZhu sometimes.
  </Steps>
  ```

## Simple Text Render

### Button

<div class='flex gap-x-2'>
  Simple
  Link style
  Back
  Pill style
  <i>Italic</i>
</div>

  ```jsx
  import { Button } from 'astro-pure/user'

  <div class='flex gap-x-2'>
    <Button as='div' title='Simple' />
    <Button as='a' href='#button' title='Link style' variant='ahead' class='not-prose' />
    <Button as='div' title='Back' variant='back' />
    <Button as='div' title='Pill style' variant='pill' />
    <Button as='div' variant='pill'><i>Italic</i></Button>
  </div>
  ```

### Spoiler

No one can find me. But I am exposed here.

  ```jsx
  import { Spoiler } from 'astro-pure/user'

  <Spoiler>No one can find me.</Spoiler> But I am exposed here.
  ```

### Formatted Date

  ```jsx
  import { FormattedDate } from 'astro-pure/user'

  <FormattedDate date={new Date('2021-08-01')} dateTimeOptions={{ month: 'short' }} />
  ```

### Label

Hello

  ```jsx
  import { Label } from 'astro-pure/user'

  <Label title='Hello' />
  ```

### SVG Loader

  ```jsx
  import { Svg } from 'astro-pure/user'

  <Svg src={import('@/assets/icons/key.svg?raw')} />
  ```

## Resources

### Icon

<div>

Single use:

Preview all icons available (click button to copy):

<div class='flex flex-wrap gap-2'>
{
  Object.keys(allIcons).map(icon => {
    const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'Copied "${icon}" to clipboard!'}}))`
    return (

        <span>{icon}</span>

    )
  })
}
</div>
</div>

  ```jsx
  import { Icon } from 'astro-pure/user'

  Single use: <Icon name='rss' class='inline' />

  Preview all icons available (click button to copy):

  import { Icons as allIcons } from 'astro-pure/libs'
  import { Button } from 'astro-pure/user'

  <div class='flex flex-wrap gap-2'>
  {
    Object.keys(allIcons).map(icon => {
      const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'Copied "${icon}" to clipboard!'}}))`
      return (
        <Button as='button' type='button' class='cursor-pointer' onclick={script}>
          <Icon slot='before' name={icon} />
          <span>{icon}</span>
        </Button>
      )
    })
  }
  </div>
  ```

There's also some [Advanced Components](/docs/integrations/advanced), which may suit for you. Hope you enjoy using these components!