Skip to content
StencilJS Web Components
CSS TypeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
LICENSE
package-lock.json
package.json
readme.md
stencil.config.ts
tsconfig.json

readme.md

Built With Stencil

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.
You can’t perform that action at this time.