Introducing Onsen CSS Components

Onsen CSS Components is a web-based theme roller for Topcoat that lets PhoneGap developers create beautiful UIs easily. Many standard UI components are supported and are easily customizable via a web interface. It also has a growing selection of beautiful UI patterns, each containing HTML and CSS to show how to reproduce the pattern.

How to use

Theme roller

Just go to Onsen CSS Components to get started. On the right is a color palette with some pre-defined color sets. You can adjust color variables the way you like.

On the left you can see the UI reflect the color you choose.

After you are done, you can download the CSS components to use with your project… or share your creative work with the world!

The download content contains the following files:

  • demo.html : example code
  • onsen_css_component.css : CSS file
  • patterns : contains all patterns HTML and CSS patterns
  • LICENSE : license info

Open demo.html to see how the CSS file is used. For detail usage, go to the Component panel on the website.

Click on a component will show its markup and CSS code.

You can copy the markup and use it with the downloaded CSS file.

If you just want to use only a few components, you can just copy the CSS code of those components.

UI Patterns

In the Overview panel, you can scroll through collections of beautiful UI patterns. This is not just eye candy; you can inspect the source code. We make it easy to copy and past the code to your project. We will keep adding more patterns. If you cannot find a pattern you want, you can request one by clicking the Request button; or you can contribute your own pattern via the Register button.


With Onsen CSS Components, we hope we can make your life as a developer easier with this growing collection of UI patterns that is easily customizable. It’s a great place to start. Why not give it a try?

Onsen CSS Components

Originally published at on April 24, 2014.

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Onsen UI & Monaca Team

Written by

Team of developers from Onsen UI and Monaca

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade