Playground Sample Templates

A good looking login/registration experience is a must have for any app. Here is a simple yet elegant looking login form example.

Rich animations power this city guide sample app, including a card-based UI.

Build an engaging UI with this SpaceX spacecraft info starter app.

A navigation bar with a cradle-like effect that can be either dragged or clicked

A master/detail UI that uses a SideDrawer as the master list with a styled view (with image background) as the child item.

Browse a restaurant menu with this engaging app UI.

3d horizontal and vertical animation of an Apple Card using only CSS.

Actively filter a listview with text entered in a Search Bar.

Browse movies and even reserve your seats with this sample app.

An easy way to display a news feed with an option to filter stories as well.

Create an order and split the cost with your friends.

Swipe through a series of cards with this UI sample.

This sample shows how to use the power of NS Layouts and CSS to build a material design based components for either iOS or Android.

A sample carousel implementation in NativeScript without relying on plugins, built with ui builder and animations.

A gorgeous app design for creating a social fitness tracker app (with charts!).

This sample shows how easily we can build a tab bar with sliding animations

Highly styled image-focused listview with text overlapping items.

This app contains a design for splitting up a bill amongst friends.

This sample shows how easily we can build a menu with rotating animations.

A basic styled drawer with a highlighted item and an image background in the header.

An app design for an engaging music player app.

A simple demonstration of how to bind to user interface components to common gestures in your NativeScript apps.

Do you have lots of menu items? Don't you worry, the RadSideDrawer has got your back. It's very simple to add a Drawer to your application.

Need a color picker for your app? Take a look at this implementation.

Modal pages are perfect when you want the user to select something without leaving the current page. Or even show a small form.

Learn how to alter your user interface based on phone and tablet form factors.

Dialogs help you to give quick feedback to the user about something. Or prompt the user to enter something, or to choose between multiple options.

A basic styled drawer with an avatar image.

You can easily create Master/Detail UI with nice animations and transitions.

Book your next travel destination with this sample app.

RadCalendar from NativeScript UI has all the features you need to show calendar, range date picking, showing events, and more.

Often times you need the list UI in your app to have an image for each item. Here's an easy way to do that.

Provide simple but effective label animations for when users focus on individual form elements.

Need to get the geocoordinates or address of the user? NativeScript-Geolocation makes that a breeze.

Start building an app to track investments with this sample.

A simple animation to create a ripple effect using only core animation techniques.

Linear progress bars are boring! How about we use some circular ones?

Provide an engaging parallax effect to your views with a simple animation.

Simple app showcasing the text-shadows plugin with drag effects.

Play the quiz with list of categories & questions and even get last quiz score and last quiz date.

NativeScript-Video makes it easy, just drop a Video tag, with a src attribute and boom, you've got video!

Use cards in your app to build attractive UI. Keep it minimal and simple.

You can easily monitor the network status of a device using NativeScript's connectivity module.

Want to notify user if the device is offline? Display Internet connection status bar

A simple news feed that uses RadListView from the pro NativeScript UI components along with pull-to-refresh functionality built-in.

You can store and retrieve data in your app using the application-settings module. This demo shows you the various application-settings APIs.

Need to play an audio file (e.g. mp3) in your app? Look no further than this audio sample app.

This sample shows how to build a fully functional offline task-tracking app (groceries) using a sqlite database.

A listview with card-based UI items that are variable sizes.

A sample utilizing nativescript-imagepicker and nativescript-background-http plugins

This sample shows how easily we can build a clock with the power of Absolute Layout and just a few lines of code.

Multi-column listview with images and text overlay.

You can easily create modal dialogs that contain custom UI.

Add sleek-looking transition animations when navigating between pages. There are many predefined animations to choose from.

Browse available hotel rooms with this sample app.

Allows you to page through the entire Marvel movie timeline, with the ability to mark movies as watched.

A basic UI-only view to inspire styled login form ideas.

Do you expect users to input things from a list? The RadAutoCompleteTextView is a UI element that makes this easy.

A sample app that provides live cricket scores with some unique UI concepts.

For when you want a two-column layout on tablets, but a one-column layout on phones.

A listview that allows you to mark specific items as favorites via a swipe action.

A UEFA Champions League sample app that can be customized for any league.

VOD (Video On Demand) app, with nice animations and a login screen.

Experiment with color selections by mixing RGB values with nice animations.

Get a head start on building a new social networking with this sample app design.

Need to take a picture and save it to the device? Look no further.

Have a list of different types of items? You can easily define different templates based on conditions, and the ListView will choose the right one.

iOS has recently introduced the concept of a large navigation bar title when the user needs to provide extra emphasis on context. This is a simple workaround that emulates this behavior.

This sample app contains an amazing design for to help boostrap the next great music streaming app.

Use NativeScript UI's RadChart component to display data creatively in your apps. There are various chart types to choose from. This demo shows a bar chart.

A step-by-step interface for booking a flight.

A sample app containing some starter screens for building a personal finance tracking app.

This sample shows how to build a simple dialog that you can style and drop into any page.

Use NativeScript UI's RadGauge to show progress of a task or any circular UI/UX experience that involves gauges.

A limited clone of Instagram with a camera module and image filters.

Get a tarot card reading - emoji style - with this engaging sample app.

A personal finance sample app with a calendar component.

An alternative type of listview that uses a repeater to display a menu of items.

A fully-functional bottom navigation bar for Android using NativeScript components.

If you need the ability to automatically or manually compose an email from your app and let the user use their mail client of choice to send it, check out this sample.