Material Design Cards contain content and actions about a single subject.
npm i --save @nativescript-community/ui-material-cardview
  • Version: 5.2.19
  • GitHub:
  • Downloads:
    • Last Day:   78
    • Last Week:  568
    • Last Month: 1754

NativeScript Material Card

Material Design's Card component for NativeScript.

npm npm


  1. Installation
  2. Changelog
  3. FAQ
  4. Usage
  5. API


:warning: Warning :warning:

From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).

For N 7.0

  • tns plugin add @nativescript-community/ui-material-cardview

For N 6.x

  • tns plugin add nativescript-material-cardview

If using tns-core-modules

  • tns plugin add nativescript-material-cardview@2.5.4

Be sure to run a new build after adding plugins to avoid any issues.




Plain NativeScript

IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-material-cardview" on the Page element


<Page xmlns:mdc="@nativescript-community/ui-material-cardview">
<StackLayout horizontalAlignment="center">
<mdc:CardView width="100" height="100"/>
<mdc:CardView elevation="5" rippleColor="red" width="100" height="100"/>


mdccardview {
ripple-color: blue;
elevation: 4;

NativeScript + Angular

import { NativeScriptMaterialCardViewModule } from "@nativescript-community/ui-material-cardview/angular";

imports: [
<MDCardView rippleColor="blue"  width="100" height="100"></MDCardView>

NativeScript + Vue

import Vue from 'nativescript-vue';
import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';

<MDCardView rippleColor="blue"  width="100" height="100"/>



Inherite from NativeScript StackLayout

  • elevation optional

An attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.

  • rippleColor optional

An attribute to set the ripple color of the cardview.