Feat/showcase component

docs/next/alert.md

@@ -7,6 +7,49 @@ import { ComponentTheme } from '../src/components';
 
 `Alerts` are used to communicate a state that affects a system, feature or page.
 
+```jsx isShowcase
+import React from 'react';
+import {
+  Alert,
+  VStack,
+  HStack,
+  IconButton,
+  CloseIcon,
+  Box,
+  Heading,
+} from 'native-base';
+
+export const Example = () => {
+  return (
+    <Alert shadow={2} w="100%" colorScheme="info">
+      <VStack space={1} flexShrink={1} w="100%">
+        <HStack
+          flexShrink={1}
+          space={2}
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <HStack space={2} flexShrink={1} alignItems="center">
+            <Alert.Icon />
+            <Heading fontSize="md" fontWeight="medium" color="coolGray.800">
+              We are going live in July!
+            </Heading>
+          </HStack>
+          <IconButton
+            variant="unstyled"
+            icon={<CloseIcon size="3" color="coolGray.600" />}
+          />
+        </HStack>
+        <Box pl="6" _text={{ color: 'coolGray.600' }}>
+          We are happy to announce that we are going live on July 28th. Get
+          ready!
+        </Box>
+      </VStack>
+    </Alert>
+  );
+};
+```
+
 ## Import
 
 NativeBase exports 5 Alert related components:

docs/next/badge.md

@@ -7,6 +7,14 @@ import { ComponentTheme } from '../src/components';
 
 `Badges` are used to highlight an item's status for quick recognition.
 
+```jsx isShowcase
+import React from "react"
+import { Badge, Center, NativeBaseProvider } from "native-base"
+export function Example() {
+  return <Badge shadow={2}>NEW FEATURE</Badge>
+}
+```
+
 ## Import
 
 ```jsx

docs/next/divider.md

@@ -7,6 +7,25 @@ import { ComponentTheme } from '../src/components';
 
 `Divider` is used to visually separate content in a list or group.
 
+```jsx isShowcase
+import React from 'react';
+import { Divider, Heading, Box } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box w="140">
+      <Heading mx="3" d="flex" alignItems="center" flexDirection="row">
+        Chrome
+      </Heading>
+      <Divider shadow={2} my="2" />
+      <Heading mx="3" d="flex" alignItems="center" flexDirection="row">
+        Firefox
+      </Heading>
+    </Box>
+  );
+};
+```
+
 ## Import
 
 ```jsx

docs/next/heading.md

@@ -7,6 +7,15 @@ import { ComponentTheme } from '../src/components';
 
 Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props.
 
+```jsx isShowcase
+import React from 'react';
+import { Heading } from 'native-base';
+
+export function Example() {
+  return <Heading>I'm a Heading</Heading>;
+}
+```
+
 ## Import
 
 ```jsx

docs/next/progress.md

@@ -7,6 +7,22 @@ import { ComponentTheme } from '../src/components';
 
 `Progress` is used to display the progress status for a task that takes a long time or consists of several steps.
 
+```jsx isShowcase
+import React from 'react';
+import { Box, Progress, Heading, Center } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Box w="100%">
+      <Center mb="10">
+        <Heading size="md"> Simple Progress Bar</Heading>
+      </Center>
+      <Progress shadow={2} value={45} mx="4" />
+    </Box>
+  );
+};
+```
+
 ## Import
 
 ```jsx

docs/next/skeleton.md

@@ -7,6 +7,28 @@ import { ComponentTheme } from '../src/components';
 
 `Skeleton` is used to display the loading state of a component.
 
+```jsx isShowcase
+import React from 'react';
+import { Skeleton, VStack } from 'native-base';
+export const Example = () => {
+  return (
+    <VStack
+    shadow={2}
+      w="400"
+      borderWidth="1"
+      space={8}
+      overflow="hidden"
+      rounded="md"
+      borderColor="coolGray.200"
+    >
+      <Skeleton h="20" />
+      <Skeleton.Text px="4" />
+      <Skeleton m="4" rounded="md" startColor="primary.100" />
+    </VStack>
+  );
+};
+```
+
 ## Examples
 
 ### Usage

docs/next/spinner.md

@@ -3,6 +3,27 @@ id: spinner
 title: Spinner
 ---
 
+```jsx isShowcase
+import React from "react"
+import {
+  Spinner,
+  HStack,
+  Heading,
+  Center,
+  NativeBaseProvider,
+} from "native-base"
+export const Example = () => {
+  return (
+    <HStack space={2} alignItems="center">
+      <Spinner shadow={2} accessibilityLabel="Loading posts" />
+      <Heading color="primary.500" fontSize="md">
+        Loading
+      </Heading>
+    </HStack>
+  )
+}
+```
+
 ## Examples
 
 ### Basic

docs/next/text.md

@@ -7,6 +7,15 @@ import { ComponentTheme } from '../src/components';
 
 `Text` is used to render text and paragraphs within an interface.
 
+```jsx isShowcase
+import React from 'react';
+import { Text } from 'native-base';
+
+export const Example = () => {
+  return <Text>This is Text.</Text>;
+};
+```
+
 ## Examples
 
 ### ChangingFontSize

docs/next/toast.md

@@ -9,6 +9,28 @@ import { ComponentTheme } from '../src/components';
 
 Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.
 
+```jsx isShowcase
+import React from 'react';
+import { Button, useToast } from 'native-base';
+
+export const Example = () => {
+  const toast = useToast();
+
+  return (
+    <Button
+      shadow={2}
+      onPress={() =>
+        toast.show({
+          description: 'Hello world',
+        })
+      }
+    >
+      Bottom
+    </Button>
+  );
+};
+```
+
 ## Import
 
 ```jsx