The default blueprint for ember-cli addons.

Usage no npm install needed!

<script type="module">
  import addeparStyleToolbox from 'https://cdn.skypack.dev/@addepar/style-toolbox';



This addon contains most of the CSS used in Addepar's design system and component library. Each addon in our component library will import specific CSS "modules" from this toolbox.

As a general rule, this toolbox is for standardized, well-designed, reusable UI styles and components. One-off styling or "hacks" should live directly within your application.

The UI in this toolbox was created to be framework agnostic. It has selector hooks for interactivity, but does not function outside of pure HTML/CSS. It is up to the developer to create fully functioning UI in their own projects. So for example, if you want to use a working dropdown component with Ember, you would use our ember-addon version of that component (adde-dropdown from @addepar/pop-menu).


ember install @addepar/style-toolbox


Once installed, you can start importing the Sass files directly into your own CSS.

For example, assuming your app has the typical styles directory setup, you can include all of the toolbox in your app/styles/app.scss file:

@import '@addepar/style-toolbox';

Or for a more specific UI piece:

@import '@addepar/style-toolbox/onyx/elements/inputs/button/index';



  • git clone <repository-url>
  • cd addepar-style-toolbox
  • yarn install


  • ./node_modules/sass-lint/bin/sass-lint.js -vq

Running tests

  • Tests TBD, this is purely CSS with no JS

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.


This project is licensed under the MIT License.