The Web Tub
Published in

The Web Tub

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.




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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Onsen UI & Monaca Team

Onsen UI & Monaca Team

Team of developers from Onsen UI and Monaca

More from Medium

Tailwind CSS center content vertically and horizontally

A centered div component


3D CSS Flippy Snaps with React && GreenSock

CSS Transitions