SVG-Powered component to easily create skeleton loadings.
It's also compatible with React Native

![React Content Loader](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)

### Create React Content Loader tool

Tool to easily create your animated skeleton-screen components, replacing usual loading and delivering better experiences for users, giving a wireframe of your pages like placeholders boxes for content and images.

https://skeletonreact.com/

### Examples

Facebook style

```js
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />
```

![Facebook Skeleton](https://user-images.githubusercontent.com/4838076/73212460-328f7500-4146-11ea-99e7-e19cd4e07a51.png)

Instagram style

```js
import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />
```

![Instagram style](https://user-images.githubusercontent.com/4838076/73212462-328f7500-4146-11ea-98dc-3a6aeafd4a26.png)

Code style

```js
import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />
````

![Code style](https://user-images.githubusercontent.com/4838076/73212459-328f7500-4146-11ea-89b0-1b7bbae8047b.png)

List style

```js
import { List } from 'react-content-loader'

const MyListLoader = () => <List />
```

![List style](https://user-images.githubusercontent.com/4838076/73212463-33280b80-4146-11ea-9f93-95c2cbdef17b.png)

Bullet list style

```js
import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () => <BulletList />
````

![Bullet list style](https://user-images.githubusercontent.com/4838076/73212458-328f7500-4146-11ea-826f-576059c4644e.png)

Custom SVG Style

```js
const MyLoader = () => (
 <ContentLoader
 height={140}
 speed={1}
 backgroundColor={'#333'}
 foregroundColor={'#999'}
 viewBox="0 0 380 70"
 >
 {/* Only SVG shapes */}
 <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
 <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
 <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
 </ContentLoader>
)
````

![Custom](https://user-images.githubusercontent.com/4838076/36352947-b87019a8-149e-11e8-99ba-c71c2bcf8733.gif)

SVG-Powered component to easily create skeleton loadings.
It’s also compatible with React Native
<img src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" alt="React Content Loader">
<h3>Create React Content Loader tool</h3>
Tool to easily create your animated skeleton-screen components, replacing usual loading and delivering better experiences for users, giving a wireframe of your pages like placeholders boxes for content and images.
<a href="https://skeletonreact.com/">https://skeletonreact.com/</a>
<h3>Examples</h3>
Facebook style
<pre><code class="language-js">import { Facebook } from &#x27;react-content-loader&#x27;

const MyFacebookLoader = () =&gt; &lt;Facebook /&gt;
</code></pre>
<img src="https://user-images.githubusercontent.com/4838076/73212460-328f7500-4146-11ea-99e7-e19cd4e07a51.png" alt="Facebook Skeleton">
Instagram style
<pre><code class="language-js">import { Instagram } from &#x27;react-content-loader&#x27;

const MyInstagramLoader = () =&gt; &lt;Instagram /&gt;
</code></pre>
<img src="https://user-images.githubusercontent.com/4838076/73212462-328f7500-4146-11ea-98dc-3a6aeafd4a26.png" alt="Instagram style">
Code style
<pre><code class="language-js">import { Code } from &#x27;react-content-loader&#x27;

const MyCodeLoader = () =&gt; &lt;Code /&gt;
</code></pre>
<img src="https://user-images.githubusercontent.com/4838076/73212459-328f7500-4146-11ea-89b0-1b7bbae8047b.png" alt="Code style">
List style
<pre><code class="language-js">import { List } from &#x27;react-content-loader&#x27;

const MyListLoader = () =&gt; &lt;List /&gt;
</code></pre>
<img src="https://user-images.githubusercontent.com/4838076/73212463-33280b80-4146-11ea-9f93-95c2cbdef17b.png" alt="List style">
Bullet list style
<pre><code class="language-js">import { BulletList } from &#x27;react-content-loader&#x27;

const MyBulletListLoader = () =&gt; &lt;BulletList /&gt;
</code></pre>
<img src="https://user-images.githubusercontent.com/4838076/73212458-328f7500-4146-11ea-826f-576059c4644e.png" alt="Bullet list style">
Custom SVG Style
<pre><code class="language-js">const MyLoader = () =&gt; (
 &lt;ContentLoader
 height={140}
 speed={1}
 backgroundColor={&#x27;#333&#x27;}
 foregroundColor={&#x27;#999&#x27;}
 viewBox=&quot;0 0 380 70&quot;
 &gt;
 {/* Only SVG shapes */}
 &lt;rect x=&quot;0&quot; y=&quot;0&quot; rx=&quot;5&quot; ry=&quot;5&quot; width=&quot;70&quot; height=&quot;70&quot; /&gt;
 &lt;rect x=&quot;80&quot; y=&quot;17&quot; rx=&quot;4&quot; ry=&quot;4&quot; width=&quot;300&quot; height=&quot;13&quot; /&gt;
 &lt;rect x=&quot;80&quot; y=&quot;40&quot; rx=&quot;3&quot; ry=&quot;3&quot; width=&quot;250&quot; height=&quot;10&quot; /&gt;
 &lt;/ContentLoader&gt;
)
</code></pre>
<img src="https://user-images.githubusercontent.com/4838076/36352947-b87019a8-149e-11e8-99ba-c71c2bcf8733.gif" alt="Custom">

SVG-Powered component to easily create skeleton loadings.
It's also compatible with React Native

![React Content Loader](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)

### Create React Content Loader tool

Tool to easily create your animated skeleton-screen components, replacing usual loading and delivering better experiences for users, giving a wireframe of your pages like placeholders boxes for content and images.

https://skeletonreact.com/

### Examples

Facebook style

```js
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />
```

![Facebook Skeleton](https://user-images.githubusercontent.com/4838076/73212460-328f7500-4146-11ea-99e7-e19cd4e07a51.png)

Instagram style

```js
import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />
```

![Instagram style](https://user-images.githubusercontent.com/4838076/73212462-328f7500-4146-11ea-98dc-3a6aeafd4a26.png)

Code style

```js
import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />
````

![Code style](https://user-images.githubusercontent.com/4838076/73212459-328f7500-4146-11ea-89b0-1b7bbae8047b.png)

List style

```js
import { List } from 'react-content-loader'

const MyListLoader = () => <List />
```

![List style](https://user-images.githubusercontent.com/4838076/73212463-33280b80-4146-11ea-9f93-95c2cbdef17b.png)

Bullet list style

```js
import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () => <BulletList />
````

![Bullet list style](https://user-images.githubusercontent.com/4838076/73212458-328f7500-4146-11ea-826f-576059c4644e.png)

Custom SVG Style

```js
const MyLoader = () => (
 <ContentLoader
 height={140}
 speed={1}
 backgroundColor={'#333'}
 foregroundColor={'#999'}
 viewBox="0 0 380 70"
 >
 {/* Only SVG shapes */}
 <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
 <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
 <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
 </ContentLoader>
)
````

![Custom](https://user-images.githubusercontent.com/4838076/36352947-b87019a8-149e-11e8-99ba-c71c2bcf8733.gif)

React Content Loader

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

## Kitten Tricks

![Kitten Tricks](https://storage.googleapis.com/reactshowcase.appspot.com/kitten-tricks.png)

This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

It’s completely free and Open Source. Compose the application from available screens, add backend integration and you will end up with A-grade cross-platform mobile application.

The themes can be changed in the runtime, without any need of reloading the application.

Download a live Demo published on both [App Store](https://apps.apple.com/us/app/kitten-tricks/id1246143230) and [Google Play](https://play.google.com/store/apps/details?id=com.akveo.kittenTricks) or simply run it yourself by cloning a GitHub repo.

![](https://camo.githubusercontent.com/f0487d92194f3c685213539c53e9784113cd8a4b/68747470733a2f2f692e696d6775722e636f6d2f58384f344748622e706e67)

![](https://camo.githubusercontent.com/9342d845b563d41ec0f0633d19a62b2738c8db46/68747470733a2f2f692e696d6775722e636f6d2f3245326e5748632e6a7067)

![Components](https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/landing/images/Components2x-p-1080.png?raw=true)

## Key features

* Built with TypeScript.
* Dark and Light themes could be used simultaneously and changed on the fly.
* 40 ready-to-use stunning screens – for any domain: e-commerce, social, fitness, etc.
* Huge variety of customizable layouts, use “as is” or add new blocks from the UI Kit.
* Integration with Eva Design System allows you to create mobile application staying in brand style and get clean, consistency design

<h2>Kitten Tricks</h2>
<img src="https://storage.googleapis.com/reactshowcase.appspot.com/kitten-tricks.png" alt="Kitten Tricks">
This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.
It’s completely free and Open Source. Compose the application from available screens, add backend integration and you will end up with A-grade cross-platform mobile application.
The themes can be changed in the runtime, without any need of reloading the application.
Download a live Demo published on both <a href="https://apps.apple.com/us/app/kitten-tricks/id1246143230">App Store</a> and <a href="https://play.google.com/store/apps/details?id=com.akveo.kittenTricks">Google Play</a> or simply run it yourself by cloning a GitHub repo.
<img src="https://camo.githubusercontent.com/f0487d92194f3c685213539c53e9784113cd8a4b/68747470733a2f2f692e696d6775722e636f6d2f58384f344748622e706e67" alt="">
<img src="https://camo.githubusercontent.com/9342d845b563d41ec0f0633d19a62b2738c8db46/68747470733a2f2f692e696d6775722e636f6d2f3245326e5748632e6a7067" alt="">
<img src="https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/landing/images/Components2x-p-1080.png?raw=true" alt="Components">
<h2>Key features</h2>
<ul>
<li>Built with TypeScript.</li>
<li>Dark and Light themes could be used simultaneously and changed on the fly.</li>
<li>40 ready-to-use stunning screens – for any domain: e-commerce, social, fitness, etc.</li>
<li>Huge variety of customizable layouts, use “as is” or add new blocks from the UI Kit.</li>
<li>Integration with Eva Design System allows you to create mobile application staying in brand style and get clean, consistency design</li>
</ul>

React Native Kitten UI

React Native framework for creating stunning cross-platform mobile applications. Design system based, brings your product from MVP to enterprise. Forever Open Source and free!

BlueWallet is a Bitcoin thin client for iOS &amp; Android, focused on security and user experience.
It’s an open source project built with React Native by bitcoiners, by community members, by hodlers, by bitcoin maximalists.

BlueWallet is a Bitcoin thin client for iOS & Android, focused on security and user experience.

It's an open source project built with React Native by bitcoiners, by community members, by hodlers, by bitcoin maximalists.

React Showcase

React Content Loader

React Native Kitten UI

BlueWallet

Subscribe