The QuickUI Catalog is evolving from a demonstration of controls to a library of controls intended for general reuse in other projects. This catalog can also serve as a design resource exploring different user interface components for consideration in your own projects.

You have several options, presented below, for using QuickUI controls in code. See the QuickUI tutorial, particularly the first section on "Using Controls", for the mechanics of how to actually use a control.

Option 1: Use a jsFiddle

This is fine for just kicking the tires to watch some QuickUI controls in action.

1. Open the sample QuickUI fiddle.
2. Interact with the live controls in the "Result" area.
3. Try editing the JavaScript to create other controls from the catalog, set different properties on them, etc. Click the Run button to update the "Result" area.

Option 2: Directly reference the .js and .css files used by the catalog

If you want to try using the controls in your own web project, you'll need to reference a recent version of jQuery, plus the core quickui.js runtime and the JavaScript and CSS files for the catalog controls. For example:

<link rel="stylesheet" type="text/css" href="http://quickui.org/release/quickui.css"/>
<link rel="stylesheet" type="text/css" href="http://quickui.org/release/quickui.catalog.css"/>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript" src="http://quickui.org/release/quickui.js"></script>
<script type="text/javascript" src="http://quickui.org/release/quickui.catalog.js"></script>

Option 3: Build the catalog controls from the source

If you want to pick and choose which catalog controls you want to use in a project, or if you want to build the catalog yourself, the source for the entire QuickUI catalog is maintained under the MIT license in the quickui-catalog repo on GitHub. Follow the instructions there for building.