Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


npm Version Discord Chat

This library is part of the Aurelia platform and extends it by adding a higher level set of user experience-oriented features such as scoped styles, theming, components and UX patterns.

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions look around our Discourse forums, chat in our community on Discord or use stack overflow. Documentation can be found in our developer hub.


To use this library, you can do

npm i @aurelia-ux/core @aurelia-ux/input tslib

and in the main entry of your app, do:

export function configure(aurelia) {
    // ... and more

If you are using webpack, instead do:

export function configure(aurelia) {
    // ... and more

If you are using datepicker component, makes sure you are also installing moment:

npm install moment

Note: tslib is a peer dependency of this library, as it helps with reducing the amount of code duplication


Check out the showcase application for demos and documentation. If you are interested in contributing, have a read through our wiki. You can view an online demo here,


Before The First Build

  • npm ci installs dependencies for the base Aurelia UX project
  • npm run bootstrap sets up a symlink between all of the packages in the monorepo
  • npm run build builds all of the mono repo projects.

Note: npm run build is very CPU intensive and takes a small period of time on most machines. If you are working within a single component, you might try npm run build instead at the component package level.


From the project's root directory

npm run test -- --scope=name runs the tests for the specified package (defaults to all packages when -- --scope=name part omitted)

If you have lerna installed globally:

lerna run test runs the tests for all packages (will start multiple chrome instances simultaneously)

From a package's own directory

npm run test runs the tests for that package npm run test:debugger to run the tests in with a Chrome Browser for debugging


Build from a package's own directory

  1. Production build:
npm run build
  1. Dev build:
npm run build:dev
# or for watch
npm run build:dev:watch

If you want to build to a specific, non default, folder, do:

npm run build -- --environment target_dir: path/to/my/dir
# or
npm run build:dev -- --environment target_dir: path/to/my/dir
# or
npm run build:dev:watch -- --environment target_dir: path/to/my/dir

Run a test app which emulates dependencies installation

To run the test app, first make sure you built all the packages via the instruction of how to build above. Then open a shell at root of this project and copy paste the following:

cd app
npm ci
npm run dev

Run a test app with direct source bundling

To run the test app, with all dependencies pointing to the packages source code, first make sure you could run in previous step, then do:

  1. Uncomment line 33 to line 65 in webpack.config.js in app folder
  2. Open a shell at root of this project and run:
cd app
npm ci
npm run dev

This will use webpack-dev-server and webpack to alias all ux dependencies to the source in pakcages folder.

Online playground

  1. Go to
  2. Add new files and play around, alternatively, fork (button near top left) to create a new gist to share


A user experience framework with higher-level capabilities, designed to bring simplicity and elegance to building cross-device, rich experiences.






Sponsor this project



No packages published