Frame Design System offers multiple installation options to meet different project needs—This guide provides detailed instructions on how to install and integrate our web components into your project.
The easiest and quickest way to start is by using our CDN, which allows you to add components directly in your HTML with a single <script> tag. This method is perfect for rapid prototyping, static HTML pages, or projects without a build process.
Using the CDN, you can instantly start using Frame Design System components without any local setup or build steps.
For more advanced use cases, such as projects with a build pipeline, we recommend installing via NPM.
CDN installation
Add the following in the <head> of your project:
<script type="module" src="https://cdn.jsdelivr.net/npm/frame-design-system@0.16.0/dist/bundle.min.js"></script>
NPM installation
System requirements
- Node.js: v18.0.0+
- npm: v9.0.0+
Prerequisites
Before installing the Frame Design System via NPM, you need to set up authentication for Font Awesome Pro we use for icons:
- Create a .npmrc file in the root of your project (if it doesn't already exist). This file will store your Font Awesome authentication token.
- Contact the FDS team to get your Font Awesome Pro token.
Once you have the token, add the following lines to your .npmrc file:
@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_FONTAWESOME_TOKEN
Replace YOUR_FONTAWESOME_TOKEN with the token provided by the team.
After setting up the .npmrc file, you can install the Frame Design System package by running:
npm install @parasutcom/frame-design-system --save
Once installed, import the Frame Design System in your project:
import '@parasutcom/frame-design-system/dist/bundle.js';
Now that you have installed the Frame Design System, you're ready to start using it in your project.
Troubleshooting
If you run into issues during installation, check for these common problems:
- Font Awesome Authentication Error: Ensure that your Font Awesome Pro token is correctly added to your .npmrc file.
- NPM Installation Failure: Review any error messages in the terminal after running npm install and ensure that you have a stable internet connection.
If issues persist, please open an issue on our GitHub repository.