Link Search Menu Expand Document
Punch UI

Build fast. Use components.

Punch UI is an open source components library for faster and easier web development. Each component is build with KnockoutJS, written in Typescript and styled with Bootstrap 5.

View Components View it on GitHub

Getting started

The guide assumes that you have intermediate knowledge about HTML, CSS, Typescipt and Knockout. The library can be used in two ways:

  • as a part of your Knockout application
  • as a part of Razor Pages

Setup for Knockout application

Import Bootstrap styles

Include bootstrap styles to your page as you like, all bootstrap theme customisations will be applied to components as well.

Import Punch UI

First, install the metapackage. This will install the latest version of package

npm i punch-ui

Below is the default directory structure

|---dist
|   |---index.d.ts
|   |---punch-ui.js
|---README.md
|---package.json
|---LICENSE

Register components

Then somewhere in your app, before you call ko.applyBindings() , you should register components. You can register all Punch UI components at ones with registerComponents() or each one you need separately. Registration instructions for each component will be presented in components documentation.

import * as ko from "knockout";
import { registerComponents } from "punch-ui";
...
function bootstrap() {
    // Register all Punch UI components.
    registerComponents();
    const app = new App();
    ko.applyBindings(app);
}

Set up for Razor pages

  1. Include bootstrap styles to your page as you like, all bootstrap theme customisations will be applied to components as well.
  2. Include Knockout bundle 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
  3. Include Punch UI bundle 
    <script src="https://cdn.jsdelivr.net/npm/punch-ui@1.0.8/dist/punch-ui.js"></script>
  4. Register components and apply bindings 
    <script>
 punch.registerComponents();
 ko.applyBindings();
</script>