Component Explorer

Try out the availiable components

This is an optional design system for the Astro Snipcart E-commerce integration. The design system is implemented with Astro and Tailwind. Some components are interactive and require client side code - this is implemented with Alpine.

Documentation

Made with ♥ by @lloydjatkinson

This page is a work in progress

In the meantime, check out the documentation!

Price

ready The price component. Uses the Text typography component to style prices and sale prices.

£10.00 £20.00 £10.00 £20.00 £10.00 £20.00 £10.00 £20.00 £10.00 £20.00 £10.00 £20.00 £10.00

<Price currency="GBP" price={ 10 } />
<Price currency="GBP" price={ 10 } originalPrice={ 20 } size="xsmall" />
<Price currency="GBP" price={ 10 } originalPrice={ 20 } size="small" />
<Price currency="GBP" price={ 10 } originalPrice={ 20 } size="standard" />
<Price currency="GBP" price={ 10 } originalPrice={ 20 } size="medium" />
<Price currency="GBP" price={ 10 } originalPrice={ 20 } size="large" />
<Price currency="GBP" price={ 10 } originalPrice={ 20 } size="xlarge" />

Typography - Text

ready The Text component. Used for all text in the design system.

Jackdaws love my big sphinx of quartz.

<div class="bg-neutral-200">
    <Text tone="attention">Jackdaws love my big sphinx of quartz.</Text>
    <Text tone="caution">Jackdaws love my big sphinx of quartz.</Text>
    <Text tone="informational">Jackdaws love my big sphinx of quartz.</Text>
    <Text tone="neutral">Jackdaws love my big sphinx of quartz.</Text>
    <Text tone="passive">Jackdaws love my big sphinx of quartz.</Text>
    <Text tone="positive">Jackdaws love my big sphinx of quartz.</Text>
</div>

<Text weight="light">Jackdaws love my big sphinx of quartz.</Text>
<Text weight="regular">Jackdaws love my big sphinx of quartz.</Text>
<Text weight="medium">Jackdaws love my big sphinx of quartz.</Text>
<Text weight="strong">Jackdaws love my big sphinx of quartz.</Text>

<Text size="xsmall">Jackdaws love my big sphinx of quartz.</Text>
<Text size="small">Jackdaws love my big sphinx of quartz.</Text>
<Text size="standard">Jackdaws love my big sphinx of quartz.</Text>
<Text size="medium">Jackdaws love my big sphinx of quartz.</Text>
<Text size="large">Jackdaws love my big sphinx of quartz.</Text>
<Text size="xlarge">Jackdaws love my big sphinx of quartz.</Text>