Pyro

Appearance

Getting started ​

Installation ​

Install pyro in your project via NPM or use a CDN.

sh
npm install pyro
html
<script src="https://unpkg.com/pyro/dist/all.js" type="module"></script>
<!-- importing all elements is quick, but not recommended-->

Framework & Editor integration ​

If using a framework like Vue or React, check the Frameworks page for better DX.

Setup ​

Get the basic CSS variables from the basic theme to get started. Import the Basic stylesheet to get started and use the pyro css class the parent element where you're using pyro.

js
import 'pyro/pyro.css';
[...]
<body class="pyro">
html
<link rel="stylesheet" href="https://unpkg.com/pyro/dist/all.js">
[...]
<body class="pyro">

If you copy-paste and edit the css variables sheet above for full theming, this step might not be needed.

Usage ​

Import the components you need.

js
import 'pyro/button'
html
<script src="https://unpkg.com/pyro/dist/button.js" type="module"></script>

Use it in your project

html
<pyro-button variant="primary">Click me</pyro-button>
<!-- el.addEventListener('input', ({event}) => { event.detail }) -->
html
<pyro-button variant="primary" @click="handleClick">Click me</pyro-button>
html
<pyro-button variant="primary" onClick="handleClick">Click me</pyro-button>