Shinobi Component Library

Build Status JavaScript Style Guide Tested with TestCafe Maintainability Test Coverage License: MIT

Table of Contents

A project by Team Rockstar Ninjas

The Shinobi Component Library (SCL) is a collection of meticulously built standard web components for you to use in any web project. Visit our website here!
Team Logo

About Web Components

It can be overwhelming trying to learn everything on web components. We recommend our short guide and the included “Recommended Resources” section.


Each component of our library is encapsulated into one JavaScript file. You can add Shinobi by downloading the source files ( from the releases page, then adding them to your project. Alternatively, you can link to the auto-generated CDN link, provided by jsdelivr.

<script src=""></script>

If you’d like to contribute or read the source code, you can:


Getting Started

Each component is named core-COMPONENT_NAME, where COMPONENT_NAME is the name of the component. Each component comes with default values allowing you to get started using just one simple line of code.

They can be used like so:


Read more on the Getting Started page.

API Docs

Component Specific API docs can be found: here
These include a full list of attributes for each component.


There are examples for each component:


Want to contribute? Read the guide on how to get started!

Build Environment

Learn how to set up the build environment and use the tools here: setting up the build pipeline.

Coding Style

Our project uses the Standard JavaScript Style, (also known as StandardJS), found at
Read more about our coding style here.

Component Architecture

We are using a very straightforward architecture for the components. It should be easy to tell by reading the code. In case you are unsure, read this short explanation here.

Repo Structure

Learn about how our project directories are set up here.


Dependencies are listed under dependencies and devDependencies in the package.json. This will have the most up-to-date list. This is a list of each dependencies:

Updating the README

The README is using a shell script to generate the table of contents. Since the README is not often updated, this script must be manually run to update the table of contents, but they can also be edited manually.
To run the script, follow the directions to set up the script then run:

./utils/gh-md-toc --insert


Known Issues

Change Log

This project is set up to use semantic-release to generate a change log from the git commit messages. Please follow the format as outline in their docs. However, it has not been fully tested or integrated to the master branch. You can read our implementation notes here.


The Shinobi Component Library is brought to you by Team Rockstar Ninjas, a group of students from UCSD’s CSE 112 course. Meet the team!


MIT License