framerxcomponents

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 />

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 />

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 />

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

<my-tooltip />

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/framerxcomponents/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 thorugh 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/framerxcomponents/dist/framerxcomponents.js".
3. Use the custom elements in the render body of the Component.

Node_Modules

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