Download kitchen sink app
Please sign in or start a free trial to try

To download the full kitchen sink ionic app or start a free trial.

You'll get everything referenced including the trial, ready for testing!

Accelerated development
for your Ionic Project

Get things done with well crafted components and premium support. More efficient than building it yourself, way better supported than open source or random scripts.

Free 10 day trial with full technical support • We'll help you get started in no time!

Use Mobiscroll with every distribution of Ionic, including the latest version. Products are available for both Ionic Angular and React.

For IONIC Framework
v1, v2, v3, v4, v5
IONIC Angular
IONIC React

"Once we started using Mobiscroll, our conversions
have improved
and the experience became
much more delightful
!"

Daniel Maldonado, Sr. Web Designer
Ecommission Financial Services

Some of the smartest companies rely on mobiscroll for their UI, more than 7,700 to be more specific

Read what people say about us

The missing ionic components are finally here

Ionic Framework helps a lot in building cross-platform hybrid and progressive web apps, but for a polished
five star experience you'll be needing more than the basic set of UI elements.

You will find a selection of components that will help you deliver great apps and meet project requirements.

Responsive Calendar

The only calendar you’ll be needing for your apps with responsive and fullscreen mode. An essential control that is missing from the basic Ionic arsenal.

  • Calendar view or wheel scroller picker
  • Use it for date-only selection or combine with time picker
  • Responsive & liquid layout
  • Single, multiple and week selection
  • Minimum and maximum values, invalids
Learn more about the Calendar

Advanced date & time picker

A more advanced date and time picker control that the basic Ionic date-time. It perfectly resembles the native pickers and their performance. Apply specific business rules for the perfect fit.

  • Circular wheels
  • Date-only, time-only or mixed modes
  • Steps for displayed values
  • Hide wheels that don't make sense
  • Min, max values, invalids
Learn more about the Date & Time

Range for date and time

A goto solution for picking date and time ranges. Date-only, time-only or mixed date & time. You can use it with one or two inputs. There is no simple alternative for the Range in the ionic controls, other than manually implementing the validation logic and adding the necessary plumbing code.

  • Date, time or date & time range
  • Calendar view or scroll pickers
  • Span across one or two inputs
Learn more about the Range picker

Advanced select scroller

A great alternative to the native dropdown or ionic select with support for single and multiple selection. Grouping, render on demand supported out of the box. With near pixel-perfect rendering to the native counterparts and great customization options, this is a great addition to the basic Ionic toolset.

  • Single or multiple value selection
  • Circular scrolling
  • Filtering and autocomplete with type ahead
  • Group header and list segmentation support
  • Rendering on demand for long lists
  • Built in support for invalids and unselectable values
Learn more about the Select

Event calendar

Compact calendar view with multiple daily or recurring events. Display, short event description in the day cells or provide lengthier text in a popup. There is no built-in alternative to this in the basic Ionic control set.

  • Fullscreen view
  • Single or multi-day events
  • Daily event listing
Learn more about the Event calendar

Color picker control

Customizable color picker control for single and multiple selection with refinement capabilities. There is no alternative to this control in the basic set of Ionic controls.

  • Single or multiple select
  • Refine luminosity
  • List any number of color presets
  • Multiple color select slots
Learn more about the Color picker

Image scroller

Enhance selections with icons or images and help users make a better, more informed choice. This control is missing from the basic Ionic controls.

  • Use it with scalable font icons
  • Use it with images
  • Embed the control inline, right into the page
Learn more about the Image scroller

Measurement scroller & conversion engine

Capture and convert force, speed, mass, temperature and distance. Scroller based picker with built-in conversion engine. There is no alternative to this control in the basic Ionic toolset.

  • Work with negative values
  • Convert between multiple units
  • Specify scroller steps for simplified validation
  • Easily write custom conversion rules
Learn more about the Measurement scroller

Number scroller

Capture and work with integer and decimal numbers with this scroller control. There is no alternative available in the basic set of Ionic controls.

  • Work with negative numbers
  • Wheel steps supported
  • Implicit validation with min/max and invalids
Learn more about the Number scroller

Numeric keypad control

Use this versatile numpad for a variety of tasks, including: number, date, time, currency, timespan and PIN entry. There is no alternative available in the basic Ionic toolset for this control.

  • Out of the box supported presets - date, time, timespan, number, decimal, masked entry
  • Suffixes and affixes supported
  • Create custom value templates and presets
Learn more about the Numpad

Timespan scroller

Make scheduling and adding past recordings easy by letting users enter timespans of seconds, minutes, hours up to years. There is no built in control in the basic Ionic set shipping with such functionality.

  • Steps for limiting values the user can pick
  • Wheels for seconds, minutes, hours, days
  • Familiar scroller based UI
Learn more about the Timespan

Hierarchical treelist

Help users pick from hierarchies in the same view. Think of it as multiple select scrollers without the need of switching context. There is no such control available in the basic Ionic set.

  • Variable depth
  • Circular wheels
  • Validation
Learn more about the Treelist

Live example with Ionic 5

This is a live example running in an actual Ionic 5 app. Use the drawer to try all the different components.
Play with the theme and language configuration.

Themes and languages

This is a live demo app that runs inside an Ionic 5 project. You can easily try different themes and language options from within the app.

Plug and play

Simply plug Mobiscroll into your existing Ionic app and create Mobiscroll component instances as you need them on various ionic elements like ion-inputs.

Download the Ionic Kitchen Sink app

Installation and setup

Simply install it like any other Ionic plugin or component.
Use the Mobiscroll CLI and get the packages you need from NPM.

Step 1. Install Mobiscroll CLI.

$ npm install -g @mobiscroll/cli

Step 2. Configure Mobiscroll in your Ionic app.

$ mobiscroll config ionic

Simple usage

Once Mobiscroll is installed in your app, use the components and directives to initialize the UI elements.
It seamlessly integrates with your Ionic workflow.

<ion-content class="padding">
  <label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" ng-model="selectedDate" mobiscroll-date>
  </label>
</ion-content>
<ion-content padding>
  <ion-item>
    <ion-label>Date</ion-label>
    <ion-input [(ngModel)]="selectedDate" mbsc-date ></ion-input>
  </ion-item>
</ion-content>
30 Day
Money Back
Guarantee
Try it RISK-FREE. If you're not extremely satisfied with our product, you'll get a full refund within the first 30 days! No questions asked!

Compared to basic Ionic components

Let's take a look how Mobiscroll stacks up against the basic set of components that ship with Ionic and why it is great companion.

Mobiscroll
Advanced components
Ionic
Basic component set
Responsive calendar
Color picker control
Event calendar
Image scroller
Measurement scroller & conversion engine
Number scroller
Numeric keypad control
Range for date and time
Generic scroller control
Timer with countdown and stopwatch
Timespan scroller
Hierarchical treelist
Option list
Scroll view
Cards Advanced features Limited functionality
Date & time picker Advanced features Limited functionality
Menus and Navigation Advanced features Limited functionality
Select scroller Advanced features Limited functionality
You can integrate mobiscroll with the following ionic elements
Various form controls Available with slight differences
Scalable icons Available
Lists Available
Loading and progress indicatiors Available
Alerts and toast Available
Popovers and modals Available
Grid layout Available
Toolbar
Floating Action Button

Try it for free

We'll support you through the whole process of getting up & running

Join great companies who take their UI seriously

"We are using Mobiscroll in one of our products.

Although it didn't come with the functionality we were looking
for out of the box, the support team went above and beyond
to help me with the problem.

I was absolutely amazed by it and got so much more
than I was expecting.
"

Tom Maddocks, Web Developer

Simple Pricing

Select the framework you are using

Looking for other products and licensing options?
Carefully crafted UI elements
For multiple projects and developers
Angular & Ionic components
Angular 2/4/5/6/7/8/9 and Ionic 2/3/4/5 supported
Visual Studio and VS Code integration
Royalty-free commercial usage
NPM and Mobiscroll CLI support
Customize themes for a perfect fit
1 year of free updates and support
30 day money back guarantee

Add the source code?

$595 $595 $770 $770
30 Day
Money Back
Guarantee
Try it RISK-FREE. If you're not extremely satisfied with our product, you'll get a full refund within the first 30 days! No questions asked!
Need a more custom solution or additional functionality? Get in touch, we can help! Explore custom development services →
More than 250 live demos with downloadable source available for usage with Ionic Framework. Try and download demos →
Browse the extensive API documentation and see how to integrate, customize and tap into the Mobiscroll API for Ionic. Explore documentation & API reference →
Start Your Free Trial
We'll support you through the whole process of getting up & running.
"Once we started using Mobiscroll, our conversions have improved and the experience became much more delightful!"
Daniel Maldonado, Sr. Web Designer, Ecommission Financial Services
Thanks for downloading
Try and customize the app locally

Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ionic serve

Let us know if we can help and enjoy!

🎉
Latest version released: v4.10.3
Released 1 month ago