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.