astro components

a component library for Astro, but it is not complete yet.

Issues and pull requests are welcomed!

github

features

• support SSG
• support dark mode

Install

npm install @shawspring/astro-components

yarn add @shawspring/astro-components

pnpm add @shawspring/astro-components

components

• Expandion
• Tabs

customization

There have 3 ways to customize:

1. all components have a class prop for root element. you can customize global styles.

2. just copy source code and customize css.

3. Reuse a built-in component. for example:

---
import {Expansion, type ExpansionProps} from '@shawspring/astro-components';
interface Props extends ExpansionProps {}
Astro.props.class = `${Astro.props.class} custom-expansion`;
---

<Expansion {...Astro.props}>
    <div class="px-4"><slot /></div>
</Expansion>

<style is:global>
    .custom-expansion {
    padding: 0 1rem;
        width: 50%;
        border: 1px solid #887766;
        border-radius: 1rem;
    }
    .custom-expansion .toggle {
        text-align: center;
        height: 3rem;
        line-height: 3rem;
    }
    .custom-expansion h2 {
        text-align: center;
    }
</style>

under the hood

take <Tabs> as an example:

<Tabs> will be transformed to custom element but without shadowRoot.

<ss-tabs data-sync-key={syncKey} class={className}>
      <nav class="tabs-nav" role="tablist">
        {Array.from(data.keys()).map((label, i) => (
          <div class:list={['tabs-nav-item', i === 0 && 'active']} role="tab">
            {label}
          </div>
        ))}
      </nav>
      <div class="tabs-content">
        {Array.from(data.values()).map((content, i) => (
          <div class:list={['tabs-content-item', i === 0 && 'active']} role="tabpanel">
            <Fragment set:html={content} />
          </div>
        ))}
      </div>
    </ss-tabs>
</ss-tabs>

do nothing in CSR（Client-Side Rendering）

without shadowRoot, all js just works for hydration.
so SSG will work well.