Framer X / StencilJS Components

This repository is an example of a few components based on the framer-bridge-starter-kit component library, but built entirely in StencilJS Web Components.

These components can be used within any Web Framework, but were designed to illustrate the workflow between maintaining a Web Component based Design System in Framer X.

Components

This package contains 4 main components:

<my-button />

A flexible button with multiple props to change the appearance.

| Property | Type | Description | Default | | -------- | --------- | --------------------- | -------------- | | text | string | Button text | Download App | | fluid | boolean | Width of button | true | | disabled | boolean | Button disabled state | false | | kind | enum | Button Kind | default |

<my-input />

An input field with props to change the appearance.

| Property | Type | Description | Default | | ----------- | --------- | -------------------- | ------- | | value | string | Input value | | | placeholder | string | Input placeholder | Email | | disabled | boolean | Input disabled state | false | | error | boolean | Input error state | false |

<my-toggle />

A usable toggle with props to change it's state.

| Property | Type | Description | Default | | -------- | --------- | --------------------- | ------- | | disabled | boolean | Toggle disabled state | false | | on | boolean | Toggle on state | false |

<my-tooltip />

A tooltip with props to change the appearance.

| Property | Type | Description | Default | | -------- | --------- | ------------------- | ----------- | | arrow | enum | Arrow direction | left | | text | string | Tooltip text | Component | | error | boolean | Tooltip error state | false |

Using Components

Follow the steps below to use them in your project.

Script Tag in HTML

1. Put this tag <script src='https://unpkg.com/stencil-framer-components/dist/framerxcomponents.js'></script> in the head of your index.html. You can use a different version by specifiying the verion following this doc.
2. Use the custom elements listed above anywhere in your template, JSX, HTML, etc.

Framer X

Check out this starter kit to learn more about how these components are maintained in Framer X, and see a working example of these living in a Framer X project.

Framer X uses React under the hood, but that doesn't mean you can't use you custom Web Components. The easiest way to include your components in Framer X is to add the script tag through a custom React Hook. If you're new to React, a good place to start is here.

1. Add this Gist to the code folder of your Framer X Project.
2. Add the custom hook + script URL to your component file. The script URL for these components is "https://unpkg.com/stencil-framer-components/dist/framerxcomponents.js".
3. Use the custom elements in the render body of the Component.

Node_Modules

1. Run npm install stencil-framer-components --save
2. Import the StencilJS component into the file you wish to use it in by adding import my-button from "stencil-framer-components" at the top.
3. Use the custom elements listed above anywhere in your template, JSX, HTML, etc.