@deltastudioapp/mats-design-puffin

Mats Design for PuffinJS

Usage no npm install needed!

<script type="module">
  import deltastudioappMatsDesignPuffin from 'https://cdn.skypack.dev/@deltastudioapp/mats-design-puffin';
</script>

README

💅🏻 Mats Design (Drac)

Mats Design is the Design system used in Studio Editor 2.1.3+. This package is a set of PuffinJS components.

🌱 Components

  • Button
  • Card
  • Radio Group
  • Navigation Bar
  • Text
  • H1...H6 titles
  • Input

🍜 Usage

Installation:

npm run install @deltastudioapp/mats-design-puffin

Example:

import { element } from '@mkenzo_8/puffin'
import { Button } from '@deltastudioapp/mats-design-puffin'

const helloButton = () => {
    return element({
        components: {
            Button
        }
    })`
        <Button>Hello World</Button>
    `
}

⚠ Warning

I do not consider myself an UI designer.

🤔 Testing

Clone the repository:

git clone https://github.com/Graviton-Code-Editor/drac.git

Install dependencies:

npm install

Test it:

npm test