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.