Setup
Learn how to configure your application to use our styles and components!
TODO
We have quick setup guides for well-known platforms. If you use something else, please let us know!
Before you start
Before you start you will need an .npmrc file that gives access to our private packages.
Here’s a recipe for getting an .npmrc in a Makefile.
React + Vite
If you don’t have one yet, scaffold a project, and choose React. Typescript is also recommended.
Tailwind and the Funnel theme
Install tailwind and the tailwind vite plugin:
Configure the vite tailwind plugin:
Update your App.css (or whatever your main css file is called) to include tailwind and our styles:
For more information refer to the main tailwind installation docs.
Fonts
Add this to the <head> in your index.html:
🎉 Now you can start using tailwind classes and our extensions in your application!
Components
To support React we produce React components that wrap our web components. Install our web components and the React wrapper:
That’s it, you can now use the React components in your app.
We also have a selection of components written specifically for React; see the React components list. Those components are in different packages so refer to their individual docs for more.
Other platforms
Styles
For other platforms you can read about setting up tailwind here.
Components
Our web components are built using Stencil; you may find some useful information in the Stencil docs.
We publish our web components to a static bucket so they can be used in your HTML using a script tag:
Note that you can replace latest in the URL above, with a major, minor or patch version.
It’s probably preferred to pin it to a version, since latest is subject to change at any point.
Here’s an example of referring to a minor version:
https://web-components-cdn.design.funnel.io/15.11/dist/components/components.esm.js
