kickstand logo

Kickstand UI

The Design System You Can Use Everywhere!

# Getting Started

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

<link rel="stylesheet" href="https://unpkg.com/kickstand-ui/dist/kickstand-ui/kickstand-ui.css" />
<script src="https://unpkg.com/kickstand-ui/dist/kickstand-ui.js"></script>

Check out our documentation for more in-depth instructions on adding it to your project.

# Extremely Performant

Kickstand UI is built using web components, so no additional JavaScript frameworks are necessary to run it. In addition to that, components are lazy-loaded in modern browsers, so the initial payload is only 8kb of JavaScript and 8kb of CSS!

As you use components throughout your application, the HTML, JavaScript, and CSS will only be loaded when it is needed, so you only load what you need.

# User Experience (UX) and Accessibility

The Kickstand UI framework is designed to make your application as usable as possible regardless of the user's circumstances. Great effort has gone into ensuring that content has sufficient color contrast, proper HTML semantics, appropriate roles and aria attributes, as well as ensuring the overall design and aesthetics make the components easy to use and interact with.

In the documentation for each of the components, there is an Accessibility section with all of the relevant information about any features that have been added to make the component more accessible and any information you should know to ensure your application is accessible.

If you feel that an improvement can be made to provide a better user experience or better accessibility, please reach out.

# Developer Experience (DX)

One of the priorities of Kickstand UI is to make creating applications as effortless as possible to developers and content creators while keeping it flexible enough to meet your needs. You should be able to prototype and develop feature-rich applications with very little custom code. However, if you need to customize the framework, you can add custom design tokens and CSS to get the look and feel you are looking for.

Customize Your Project

# Browser Support

Chrome Chromium Firefox Safari Opera Edge Internet Explorer 11

All of Kickstand UI's components are built using standards-based web components. Browser support has greatly improved over the years. For features that are not fully supported, polyfills have been added (which will be included as-needed) to provide a great experience no matter what browser you are using.

Supported browsers include Chrome, Chromium-based browsers (this includes Brave, the new Microsoft Edge, and Vivaldi), Firefox, Safari, Opera, Microsoft Edge (legacy), and Internet Explorer 11.

# Framework Support

HTML5 Vuejs React Angular Ember

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