# Installation

# CDN

Installing Kickstand UI is as easy as adding a few tags to your page.

<!-- global styles and utility classes -->
<link rel="stylesheet" href="https://unpkg.com/kickstand-ui/dist/kickstand-ui/kickstand-ui.css" />

<!-- scripts for browsers that support ES modules -->
<script type="module" src="https://unpkg.com/kickstand-ui/dist/kickstand-ui/kickstand-ui.esm.js"></script>
<!-- scripts for browsers that do not support ES modules (legacy browsers) -->
<script nomodule src="https://unpkg.com/kickstand-ui/dist/kickstand-ui/kickstand-ui.js"></script>

NOTE

For the best user experience, be sure to include both script tags.

# Package Manager

If you are using build tools or a framework, you can add it to your project as an NPM package.

npm install --save kickstand-ui

# or

yarn add kickstand-ui

# Add To Your Project

import { applyPolyfills, defineCustomElements } from "kickstand-ui/loader";

// Apply the polyfills and bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements();
});

# Styles

Kickstand UI was written using SASS (opens new window). Using SASS is not required to use and customize Kickstand UI for your needs, but we have created some great SASS tools to really accelerate the development process. You can import them into your project from kickstand-ui/src/scss/styles.scss.

If you are planning on using the compiled CSS, you can find it at kickstand-ui/dist/kickstand-ui/kickstand-ui.css.

# Framework Integrations

Kickstand UI is built with native web components which makes it framework agnostic! You can implement it in any of your projects regardless of the framework you are using.

Add To Your Project