Stencil Components

Addison Schultz

StencilJS Components in Framer X

If you’re looking to see how StencilJS Web components work inside of Framer X, you’re in the right place.

This type of setup not only allows you to fully use your StencilJS components in Framer X, but also to publish and disribute them to the wider team through the Framer X Team Store.

There are two versions of these components, a set coming from the unpkg CDN, and another set coming directly from the node_modules folder installed in this project. Both versions will work, it just depends on the type of setup you want to use.

You can check the Github Repository or the NPM Registry for more info on these components and to see what they look like out of the context of Framer X.

Components

This package contains 4 Web Components, modeled after the components used in the framer-bridge-starter-kit. Additionally, these components have added PropertyControls to visually change the props the components are using. You can use these components in a project by installing this package to your Framer X Project!

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

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

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

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

This setup is setup in a way that anytime a new version is published to NPM, the components will automatically update in all instances (Even the ones uploaded/downloaded through the Framer X Team Store)!

To learn more feel free to check out this blogpost, or tweet me @addisonschultz.

Info

  • Version: 1.8.0
  • Updated: 25 days ago
  • License: MIT

Share

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree