Astro Theme Pure

Back

User Components

Easily extend your content page more interactive

Docs content

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.

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

Container#

Card#

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>
jsx

Renders:

Lorem ipsum

Lorem ipsum dolor sit amet, vidit suscipit at mei.

August 2021

You can even contain a list here

Collapse#

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>
jsx

Renders:

Lorem ipsum

Lorem ipsum dolor sit amet, vidit suscipit at mei.
Are you sure you want to see?

Lorem ipsum

Lorem ipsum dolor sit amet, vidit suscipit at mei.

Aside#

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>
jsx

Renders:

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/index.ts β†— for reference code.

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

Tabs#

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

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

Renders:

Sirius, Vega, Betelgeuse

List#

CardList#

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: '#' },
    { title: 'Dolor sit amet', children: [{
      title: 'Vidit suscipit', link: '#'
    }] }
  ]
} />
jsx

Renders:

A list

  • I am hidden!

A list

Timeline#

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

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

Renders:

  • August 2021
    Hello
  • August 2022
    World!

Steps#

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

How to Yi Jian San Lian:

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

Renders:

How to Yi Jian San Lian:

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

Simple Text Render#

Button#

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' style='ahead' class='not-prose' />
  <Button as='div' title='Back' style='back' />
  <Button as='div' title='Pill style' style='pill' />
  <Button as='div' style='pill'><i>Italic</i></Button>
</div>
jsx

Renders:

Simple

Link style

Back

Pill style

Italic

Spoiler#

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

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

Renders:

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

Formatted Date#

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

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

Renders:

Label#

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

<Label title='Hello' />
jsx

Renders:

Hello

There’s also some Advanced Components, which may suit for you. Hope you enjoy using these components!

Resources#

Icon#

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

<Icon name='rss' class='size-5' />

<br />
// You can also check 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} class='size-5' />
        <span>{icon}</span>
      </Button>
    )
  })
}
</div>
jsx

Renders:


See more docs