User Components
Easily extend your content page more interactive
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.
Containers
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>---
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
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
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 ↗ for reference code.
:::tip
This theme author is a good guy.
:::Tabs
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
Hello
<p>Hello</p>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
A list
- Lorem ipsum
-
Dolor sit amet
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
- August 2021Hello
- August 2022World!
import { Timeline } from 'astro-pure/user'
<Timeline events={
[
{ date: 'August 2021', content: 'Hello' },
{ date: 'August 2022', content: '<i>World!</i>' },
]
} />Steps
How to Yi Jian San Lian:
-
Dian Zan
-
Tou Bi
-
Shou Cang
Or GuanZhu sometimes.
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
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.
import { Spoiler } from 'astro-pure/user'
<Spoiler>No one can find me.</Spoiler> But I am exposed here.Formatted Date
import { FormattedDate } from 'astro-pure/user'
<FormattedDate date={new Date('2077-01-01')} dateTimeOptions={{ month: 'short' }} />Label
Hello
import { Label } from 'astro-pure/user'
<Label title='Hello' />SVG Loader
import { Svg } from 'astro-pure/user'
<Svg src={import('@/assets/icons/key.svg?raw')} />Resources
Icon
Single use:
Preview all icons available (click button to copy):
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, which may suit for you. Hope you enjoy using these components!