IMPORTANT: WE HAVE MOVED TO THE OFFICIAL TABLER PROJECT REPOSITORY https://github.com/tabler/tabler-react

react-tabler-components

A WIP collection of React components for Tabler

Demo

https://jonthomp.github.io/react-tabler-components/

Install

npm install --save react-tabler-components
or
yarn add react-tabler-components

Usage

At the moment this is a set of components only, it does not come with the Tabler CSS or Javascript packaged along side so you should add them into your project in the way that suites you best. In the example we're just using a local copy of the Tabler files and Bootstrap/Google CDNs for Fonts. The %PUBLIC_URL% is replaced by create-react-app at build time.

<linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><linkrel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"><scriptsrc="%PUBLIC_URL%/assets/js/require.min.js"></script><script>requirejs.config({baseUrl: '.'});</script><!-- Dashboard Core --><linkhref="%PUBLIC_URL%/assets/css/dashboard.css" rel="stylesheet" /><scriptsrc="%PUBLIC_URL%/assets/js/dashboard.js"></script><!-- c3.js Charts Plugin --><linkhref="%PUBLIC_URL%/assets/plugins/charts-c3/plugin.css" rel="stylesheet" /><scriptsrc="%PUBLIC_URL%/assets/plugins/charts-c3/plugin.js"></script><!-- Google Maps Plugin --><linkhref="%PUBLIC_URL%/assets/plugins/maps-google/plugin.css" rel="stylesheet" /><scriptsrc="%PUBLIC_URL%/assets/plugins/maps-google/plugin.js"></script><!-- Input Mask Plugin --><scriptsrc="%PUBLIC_URL%/assets/plugins/input-mask/plugin.js"></script>

Then you just import react-tabler-components and get building...

importReact,{Component}from"react";import{Card,Text,Icon}from"react-tabler-components";classMyCardextendsComponent{render(){return(<Card><Card.Header><Card.Title>Card Title</Card.Title></Card.Header><Card.Body><Textcolor="red">
Some Red text next to an icon
<Iconname="user"/></Text></Card.Body></Card>);}}

License

MIT © jonthomp