diff --git a/src/framework/theme/application/applicationProvider.component.tsx b/src/framework/theme/application/applicationProvider.component.tsx
index b6882caca..b8c2226c1 100644
--- a/src/framework/theme/application/applicationProvider.component.tsx
+++ b/src/framework/theme/application/applicationProvider.component.tsx
@@ -30,7 +30,7 @@ interface State {
 }
 
 /**
- * ApplicationProvider component is designed to be a root of the application.
+ * `ApplicationProvider` component is designed to be a root of the application.
  *
  * This does basically two things:
  * - Provides styles for basic components;
@@ -51,7 +51,7 @@ interface State {
  *
  * @property ThemeProviderProps
  *
- * @example ApplicationProvider API example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/theme/modal/modal.service.tsx b/src/framework/theme/modal/modal.service.tsx
index 5b4483b94..b9001ff3e 100644
--- a/src/framework/theme/modal/modal.service.tsx
+++ b/src/framework/theme/modal/modal.service.tsx
@@ -19,7 +19,7 @@ import { ModalPresentingBased } from '../../ui/support/typings';
  *
  * @method {(identifier: string, children: React.ReactNode) => void} update - Updates component from a modal window.
  *
- * @example Simple Usage example
+ * @example Simple Usage
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/theme/style/style.service.ts b/src/framework/theme/style/style.service.ts
index cb3837df0..543b657cb 100644
--- a/src/framework/theme/style/style.service.ts
+++ b/src/framework/theme/style/style.service.ts
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import { ThemedStyleType } from '@eva-design/dss';
 import { StyleType } from './type';
 import { getThemeValue } from '../theme/theme.service';
diff --git a/src/framework/theme/style/styleConsumer.component.tsx b/src/framework/theme/style/styleConsumer.component.tsx
index d99918a32..9bfe9365e 100644
--- a/src/framework/theme/style/styleConsumer.component.tsx
+++ b/src/framework/theme/style/styleConsumer.component.tsx
@@ -39,7 +39,7 @@ export interface ContextProps {
 export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps & P>;
 
 /**
- * High Order Function which is used to apply style mapping on component.
+ * `styled` is a High Order Function which is used to apply style mapping on component.
  *
  * Requires component to have `styledComponentName` string property which defines
  * corresponding component name in mapping. (e.g 'Button' for Button component).
@@ -57,7 +57,7 @@ export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps
  *
  * @param Component - Type: {React.ComponentClass}. Determines class or functional component to be styled.
  *
- * @example Declaring Styled Component
+ * @overview-example Declaring Styled Component
  *
  * ```
  * import React from 'react';
@@ -111,7 +111,7 @@ export type StyledComponentClass<P> = React.ComponentClass<StyledComponentProps
  * export const StyledButton = styled<StyledButtonProps>(Button);
  * ```
  *
- * @example Styled Component Usage
+ * @overview-example Styled Component Usage
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/theme/style/styleConsumer.service.ts b/src/framework/theme/style/styleConsumer.service.ts
index 60aae6cda..041190aed 100644
--- a/src/framework/theme/style/styleConsumer.service.ts
+++ b/src/framework/theme/style/styleConsumer.service.ts
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import {
   ControlMetaType,
   ControlThemedStyleType,
diff --git a/src/framework/theme/theme/theme.service.ts b/src/framework/theme/theme/theme.service.ts
index 29eb53f05..80dfdb910 100644
--- a/src/framework/theme/theme/theme.service.ts
+++ b/src/framework/theme/theme/theme.service.ts
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import { ThemeType } from './type';
 
 const SYMBOL_REFERENCE: string = '$';
diff --git a/src/framework/theme/theme/themeConsumer.component.tsx b/src/framework/theme/theme/themeConsumer.component.tsx
index abb8c4100..9fc5aff31 100644
--- a/src/framework/theme/theme/themeConsumer.component.tsx
+++ b/src/framework/theme/theme/themeConsumer.component.tsx
@@ -33,7 +33,7 @@ export interface Context {
 export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps & P>;
 
 /**
- * High Order Function which is used to create themed style for non-styled component.
+ * `withStyles` is a High Order Function which is used to create themed style for non-styled component.
  * Basically used when need to use theme variable somewhere.
  * Returns component class which can be used as themed component.
  *
@@ -45,7 +45,7 @@ export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps
  *
  * @param createStyles - Type: {(theme: ThemeType) => any}. Determines arrow function used to create styles.
  *
- * @example Declaring Themed Component
+ * @overview-example Declaring Themed Component
  *
  * ```
  * import React from 'react';
@@ -76,13 +76,13 @@ export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps
  * }));
  * ```
  *
- * @example Themed Component Usage
+ * @overview-example Themed Component Usage
  *
  * ```
  * import React from 'react';
  * import {
- *  ThemedButton,
- *  ThemedButtonProps,
+ *   ThemedButton,
+ *   ThemedButtonProps,
  * } from './path-to/themedButton.component';
  *
  * export const ThemedButtonShowcase = (props?: ThemedButtonProps): React.ReactElement<ThemedButtonProps> => {
@@ -92,6 +92,7 @@ export type ThemedComponentClass<P> = React.ComponentClass<ThemedComponentProps
  * };
  * ```
  */
+
 export const withStyles = <P extends object>(Component: React.ComponentType<P>,
                                              createStyles?: CreateStylesFunction): ThemedComponentClass<P> => {
 
diff --git a/src/framework/theme/theme/themeContext.ts b/src/framework/theme/theme/themeContext.ts
index 499e7a5c2..add92d2d0 100644
--- a/src/framework/theme/theme/themeContext.ts
+++ b/src/framework/theme/theme/themeContext.ts
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import React from 'react';
 import { ThemeType } from './type';
 
diff --git a/src/framework/ui/avatar/avatar.component.tsx b/src/framework/ui/avatar/avatar.component.tsx
index 449c1bc51..b1dac6025 100644
--- a/src/framework/ui/avatar/avatar.component.tsx
+++ b/src/framework/ui/avatar/avatar.component.tsx
@@ -26,7 +26,7 @@ export type AvatarProps = StyledComponentProps & ImageProps & ComponentProps;
 export type AvatarElement = React.ReactElement<AvatarProps>;
 
 /**
- * Styled Image component.
+ * `Avatar` is a styled `Image` component.
  *
  * @extends React.Component
  *
@@ -42,7 +42,7 @@ export type AvatarElement = React.ReactElement<AvatarProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -54,6 +54,23 @@ export type AvatarElement = React.ReactElement<AvatarProps>;
  *   );
  * };
  * ```
+ *
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { Avatar, AvatarProps } from 'react-native-ui-kitten';
+ *
+ * export const AvatarShowcase = (props?: AvatarProps): React.ReactElement<AvatarProps> => {
+ *   return (
+ *     <Avatar
+ *       source={{uri: 'https://path-to/awesome-image.png'}}
+ *       size='large'
+ *       shape='rounded'
+ *     />
+ *   );
+ * };
+ * ```
  */
 
 export class AvatarComponent extends React.Component<AvatarProps> {
diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
index 75a47702c..1ef043f59 100644
--- a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
+++ b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
@@ -37,7 +37,7 @@ export type BottomNavigationProps = StyledComponentProps & ViewProps & Component
 export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
 
 /**
- * BottomNavigation component is designed to be a Bottom Tab Bar.
+ * `BottomNavigation` component is designed to be a Bottom Tab Bar.
  * Can be used for navigation.
  *
  * @extends React.Component
@@ -58,7 +58,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -88,7 +88,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  * }
  * ```
  *
- * @overview-example Without indicator
+ * @overview-example Without Indicator
  *
  * ```
  * import React from 'react';
@@ -118,7 +118,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  * }
  * ```
  *
- * @example Inline styling example
+ * @example Inline Styling
  *
  * ```
  * import React, { ReactElement } from 'react';
@@ -137,7 +137,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  * };
  * ```
  *
- * @example With React Navigation API and usage example
+ * @example With React Navigation
  *
  * ```
  * import React, { ReactElement } from 'react';
diff --git a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
index 06df6bb35..034108768 100644
--- a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
+++ b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
@@ -40,9 +40,9 @@ export type BottomNavigationTabProps = StyledComponentProps & TouchableOpacityPr
 export type BottomNavigationTabElement = React.ReactElement<BottomNavigationTabProps>;
 
 /**
- * BottomNavigationTab component is a part of the BottomNavigation component.
- * BottomNavigation tabs should be wrapped in BottomNavigation to provide usable component.
- * See usage examples at BottomNavigation component documentation.
+ * `BottomNavigationTab` component is a part of the `BottomNavigation` component.
+ * `BottomNavigation` tabs should be wrapped in BottomNavigation to provide usable component.
+ * See usage examples at `BottomNavigation` component documentation.
  *
  * @extends React.Component
  *
diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx
index 62caf7c39..47c68d323 100644
--- a/src/framework/ui/button/button.component.tsx
+++ b/src/framework/ui/button/button.component.tsx
@@ -42,7 +42,7 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone
 export type ButtonElement = React.ReactElement<ButtonProps>;
 
 /**
- * Styled Button component.
+ * Styled `Button` component.
  *
  * @extends React.Component
  *
@@ -70,7 +70,7 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -93,7 +93,7 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  * };
  * ```
  *
- * @overview-example Eva-related props using example
+ * @overview-example Eva Styling
  *
  * ```
  * import React from 'react';
@@ -119,27 +119,7 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  * };
  * ```
  *
- * @example Inline styling example
- *
- * ```
- * import React from 'react';
- * import {
- *   Button,
- *   ButtonProps,
- * } from 'react-native-ui-kitten';
- *
- * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement<ButtonProps> => {
- *   return (
- *     <Button
- *       style={styles.button}
- *       textStyle={styles.buttonText}>
- *       BUTTON
- *     </Button>
- *   );
- * };
- * ```
- *
- * @example Button with Icon usage example
+ * @example Inline Styling with Icon
  *
  * ```
  * import React from 'react';
@@ -155,7 +135,10 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  *
  * const ButtonIcon = (style: ImageStyle): React.ReactElement<ImageProps> => {
  *   return (
- *     <Image style={style} source={{ uri: 'path/to/image' }}/>
+ *     <Image
+ *       style={style}
+ *       source={{ uri: 'path/to/image' }}
+ *     />
  *   );
  * };
  *
@@ -163,6 +146,7 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  *   return (
  *     <Button
  *       style={styles.button}
+ *       textStyle={styles.buttonText}
  *       icon={ButtonIcon}>
  *       BUTTON
  *     </Button>
diff --git a/src/framework/ui/buttonGroup/buttonGroup.component.tsx b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
index 3801bae68..660b20ede 100644
--- a/src/framework/ui/buttonGroup/buttonGroup.component.tsx
+++ b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
@@ -30,7 +30,7 @@ export type ButtonGroupProps = StyledComponentProps & ViewProps & ComponentProps
 export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
 
 /**
- * Renders a group of buttons.
+ * Renders a group of `Buttons`.
  *
  * @extends React.Component
  *
@@ -51,7 +51,7 @@ export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
  *
  * @property StyledComponentProps
  *
- * @example ButtonGroup usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -67,6 +67,25 @@ export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
  *   );
  * };
  * ```
+ *
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { Button, ButtonGroup, ButtonGroupProps } from 'react-native-ui-kitten';
+ *
+ * export const ButtonGroupShowcase = (props?: ButtonGroupProps): React.ReactElement<ButtonGroupProps> => {
+ *   return (
+ *     <ButtonGroup
+ *       size='large'
+ *       status='warning'>
+ *       <Button>Left</Button>
+ *       <Button>Mid</Button>
+ *       <Button>Right</Button>
+ *     </ButtonGroup>
+ *   );
+ * };
+ * ```
  */
 
 class ButtonGroupComponent extends React.Component<ButtonGroupProps> {
diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx
index c5d4073e6..8a8b4ebeb 100644
--- a/src/framework/ui/checkbox/checkbox.component.tsx
+++ b/src/framework/ui/checkbox/checkbox.component.tsx
@@ -45,7 +45,7 @@ export type CheckBoxProps = StyledComponentProps & TouchableOpacityProps & Compo
 export type CheckBoxElement = React.ReactElement<CheckBoxProps>;
 
 /**
- * Styled CheckBox component.
+ * Styled `CheckBox` component.
  *
  * @extends React.Component
  *
@@ -68,7 +68,7 @@ export type CheckBoxElement = React.ReactElement<CheckBoxProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -95,7 +95,35 @@ export type CheckBoxElement = React.ReactElement<CheckBoxProps>;
  * }
  * ```
  *
- * @example Inline styling example
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { CheckBox } from 'react-native-ui-kitten';
+ *
+ * export class CheckBoxShowcase extends React.Component {
+ *
+ *   public state = {
+ *     checked: false,
+ *   };
+ *
+ *   private onChange = (checked: boolean) => {
+ *     this.setState({ checked });
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <CheckBox
+ *         checked={this.state.checked}
+ *         status='success'
+ *         onChange={this.onChange}
+ *       />
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * @example Inline Styling
  *
  * ```
  * import React from 'react';
@@ -107,11 +135,135 @@ export type CheckBoxElement = React.ReactElement<CheckBoxProps>;
  *       style={styles.checkbox}
  *       textStyle={styles.checkboxText}
  *       text='Place your text'
+ *       indeterminate={true}
  *       checked={this.state.checked}
  *     />
  *   );
  * };
  * ```
+ *
+ * @example Indeterminate
+ *
+ * ```
+ * import React from 'react';
+ * import { CheckBox } from '@kitten/ui';
+ * import { View } from 'react-native';
+ *
+ * interface State {
+ *   mainCheckboxChecked: boolean;
+ *   mainCheckboxIndeterminate: boolean;
+ *   checkbox1Checked: boolean;
+ *   checkbox2Checked: boolean;
+ *   checkbox3Checked: boolean;
+ * }
+ *
+ * export class CheckBoxContainer extends React.Component<any, State> {
+ *
+ *   public state: State = {
+ *     mainCheckboxChecked: false,
+ *     mainCheckboxIndeterminate: false,
+ *     checkbox1Checked: false,
+ *     checkbox2Checked: false,
+ *     checkbox3Checked: false,
+ *   };
+ *
+ *   private onMainCheckboxChange = (checked: boolean): void => {
+ *     if (checked) {
+ *       this.setState({
+ *         checkbox1Checked: true,
+ *         checkbox2Checked: true,
+ *         checkbox3Checked: true,
+ *       });
+ *     } else {
+ *       this.setState({
+ *         checkbox1Checked: false,
+ *         checkbox2Checked: false,
+ *         checkbox3Checked: false,
+ *       });
+ *     }
+ *     this.setState({ mainCheckboxChecked: checked });
+ *   };
+ *
+ *   private onCheckbox1Change = (checked: boolean): void => {
+ *     this.setState({ checkbox1Checked: checked }, this.setMainCheckboxDependingState);
+ *   };
+ *
+ *   private onCheckbox2Change = (checked: boolean): void => {
+ *     this.setState({ checkbox2Checked: checked }, this.setMainCheckboxDependingState);
+ *   };
+ *
+ *   private onCheckbox3Change = (checked: boolean): void => {
+ *     this.setState({ checkbox3Checked: checked }, this.setMainCheckboxDependingState);
+ *   };
+ *
+ *   private setMainCheckboxDependingState = (): void => {
+ *     const { checkbox1Checked, checkbox2Checked, checkbox3Checked } = this.state;
+ *     const states: boolean[] = [checkbox1Checked, checkbox2Checked, checkbox3Checked];
+ *     const someChecked: boolean = states.some((item: boolean) => item === true);
+ *     const everyChecked: boolean = states.every((item: boolean) => item === true);
+ *
+ *     if (someChecked && !everyChecked) {
+ *       this.setState({
+ *         mainCheckboxChecked: true,
+ *         mainCheckboxIndeterminate: true,
+ *       });
+ *     } else if (!someChecked && !everyChecked) {
+ *       this.setState({
+ *         mainCheckboxChecked: false,
+ *         mainCheckboxIndeterminate: false,
+ *       });
+ *     } else if (everyChecked) {
+ *       this.setState({
+ *         mainCheckboxChecked: true,
+ *         mainCheckboxIndeterminate: false,
+ *       });
+ *     }
+ *  };
+ *
+ *  public render(): React.ReactNode {
+ *    const {
+ *      mainCheckboxChecked,
+ *      mainCheckboxIndeterminate,
+ *      checkbox1Checked,
+ *      checkbox2Checked,
+ *      checkbox3Checked,
+ *    } = this.state;
+ *
+ *     return (
+ *      <View style={{
+ *        flex: 1,
+ *        padding: 20,
+ *      }}>
+ *         <CheckBox
+ *           style={{ marginBottom: 12 }}
+ *           text='Main'
+ *           checked={mainCheckboxChecked}
+ *           indeterminate={mainCheckboxIndeterminate}
+ *           onChange={this.onMainCheckboxChange}
+ *         />
+ *         <CheckBox
+ *           text='Checkbox 1'
+ *           style={{ marginLeft: 12, marginBottom: 12 }}
+ *           checked={checkbox1Checked}
+ *           onChange={this.onCheckbox1Change}
+ *         />
+ *         <CheckBox
+ *           text='Checkbox 2'
+ *           style={{ marginLeft: 12, marginBottom: 12 }}
+ *           checked={checkbox2Checked}
+ *           onChange={this.onCheckbox2Change}
+ *         />
+ *         <CheckBox
+ *           text='Checkbox 3'
+ *           style={{ marginLeft: 12 }}
+ *           checked={checkbox3Checked}
+ *           onChange={this.onCheckbox3Change}
+ *         />
+ *       </View>
+ *     );
+ *   }
+ * }
+ * ```
  * */
 
 class CheckBoxComponent extends React.Component<CheckBoxProps> {
diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx
index 1cd1a9de0..2da300aa8 100644
--- a/src/framework/ui/input/input.component.tsx
+++ b/src/framework/ui/input/input.component.tsx
@@ -59,7 +59,7 @@ export type InputProps = StyledComponentProps & TextInputProps & ComponentProps;
 export type InputElement = React.ReactElement<InputProps>;
 
 /**
- * Styled Input component.
+ * Styled `Input` component.
  *
  * @extends React.Component
  *
@@ -79,7 +79,7 @@ export type InputElement = React.ReactElement<InputProps>;
  * Can be `primary`, `success`, `info`, `warning` or `danger`.
  *
  * @property {string} size - Determines the size of the component.
- * Can be `giant`, `large`, `medium`, `small`, or `tiny`.
+ * Can be `large`, `medium` or `small`.
  * Default is `medium`.
  *
  * @property {string} label - Determines label of the component.
@@ -100,7 +100,7 @@ export type InputElement = React.ReactElement<InputProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -127,25 +127,126 @@ export type InputElement = React.ReactElement<InputProps>;
  * }
  * ```
  *
- * @example Inline styling example
+ * @overview-example Eva Styling
  *
  * ```
  * import React from 'react';
- * import { Input, InputProps } from 'react-native-ui-kitten';
- *
- * export const InputShowcase = (props?: InputProps): React.ReactElement<InputProps> => {
- *   return (
- *     <Input
- *       style={styles.input}
- *       textStyle={styles.inputText}
- *       labelStyle={styles.inputLabel}
- *       captionStyle={styles.inputCaption}
- *       label='Label'
- *       caption='Caption'
- *       placeholder='Placeholder'
- *     />
- *   );
- * };
+ * import { Input } from 'react-native-ui-kitten';
+ *
+ * export class InputShowcase extends React.Component {
+ *
+ *   public state = {
+ *     inputValue: '',
+ *   };
+ *
+ *   private onInputValueChange = (inputValue: string) => {
+ *     this.setState({ inputValue });
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <Input
+ *         size='large'
+ *         status='danger'
+ *         value={this.state.inputValue}
+ *         onChangeText={this.onInputValueChange}
+ *       />
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * @example With Icons
+ *
+ * ```
+ * import React from 'react';
+ * import {
+ *   StyleSheet,
+ *   View,
+ *   ImageProps,
+ *   Image,
+ *   GestureResponderEvent,
+ *   Alert,
+ * } from 'react-native';
+ * import { Input } from 'react-native-ui-kitten';
+ *
+ * export class InputShowcase extends React.Component {
+ *
+ *   public state = {
+ *     inputValue: '',
+ *   };
+ *
+ *   private onInputValueChange = (inputValue: string) => {
+ *     this.setState({ inputValue });
+ *   };
+ *
+ *   private onIconPress = (event: GestureResponderEvent): void => {
+ *     Alert.alert('On Input Icon Press');
+ *   };
+ *
+ *   private renderIcon = (style: StyleType): React.ReactElement<ImageProps> => {
+ *     return (
+ *       <Image
+ *         style={style}
+ *         source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}
+ *       />
+ *     );
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <Input
+ *         value={this.state.inputValue}
+ *         icon={this.renderIcon}
+ *         onIconPress={this.onIconPress}
+ *         caption='Caption'
+ *         captionIcon={this.renderIcon}
+ *         style={styles.input}
+ *         onChangeText={this.onInputValueChange}
+ *       />
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * @example Inline Styling
+ *
+ * ```
+ * import React from 'react';
+ * import {
+ *   StyleSheet,
+ *   View,
+ *   ImageProps,
+ *   Image,
+ *   GestureResponderEvent,
+ *   Alert,
+ * } from 'react-native';
+ * import { Input } from 'react-native-ui-kitten';
+ *
+ * export class InputShowcase extends React.Component {
+ *
+ *   public state = {
+ *     inputValue: '',
+ *   };
+ *
+ *   private onInputValueChange = (inputValue: string) => {
+ *     this.setState({ inputValue });
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <Input
+ *         value={this.state.inputValue}
+ *         caption='Caption'
+ *         style={styles.input}
+ *         textStyle={styles.inputText}
+ *         labelStyle={styles.inputLabel}
+ *         captionStyle={styles.inputCaption}
+ *         onChangeText={this.onInputValueChange}
+ *       />
+ *     );
+ *   }
+ * }
  * ```
  * */
 
diff --git a/src/framework/ui/layout/layout.component.tsx b/src/framework/ui/layout/layout.component.tsx
index d210f5a9f..893fd2ead 100644
--- a/src/framework/ui/layout/layout.component.tsx
+++ b/src/framework/ui/layout/layout.component.tsx
@@ -6,15 +6,12 @@
 
 import React from 'react';
 import {
-  StyleSheet,
   View,
   ViewProps,
-  ViewStyle,
 } from 'react-native';
 import {
   styled,
   StyledComponentProps,
-  StyleType,
 } from '@kitten/theme';
 
 type ChildElement = React.ReactElement<any>;
@@ -29,8 +26,8 @@ export type LayoutProps = StyledComponentProps & ViewProps & ComponentProps;
 export type LayoutElement = React.ReactElement<LayoutProps>;
 
 /**
- * Layout container component. Behaves like React Native View.
- * The key feature of using Layout instead of View is that
+ * `Layout` container component. Behaves like React Native `View`.
+ * The key feature of using `Layout` instead of `View` is that
  * it automatically picks background color fitting to current theme.
  *
  * @extends React.Component
@@ -44,21 +41,54 @@ export type LayoutElement = React.ReactElement<LayoutProps>;
  *
  * @property StyledComponentProps
  *
- * @example Layout usage and API example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
+ * import { StyleSheet } from 'react-native';
  * import {
  *   Layout,
  *   Text,
- * } from 'react-native-ui-kitten';
+ * } from '@kitten/ui';
  *
- * public render(): React.ReactNode {
- *   return (
- *     <Layout>
- *       <Text>Layout</Text>
- *     </Layout>
- *   );
+ * export class LayoutShowcase extends React.Component {
+ *
+ *  public render(): React.ReactNode {
+ *    return (
+ *      <Layout style={styles.container}>
+ *        <Text>Layout</Text>
+ *      </Layout>
+ *    );
+ *  }
+ *}
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     padding: 16,
+ *   },
+ * });
+ * ```
+ *
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { StyleSheet } from 'react-native';
+ * import {
+ *   Layout,
+ *   Text,
+ * } from '@kitten/ui';
+ *
+ * export class LayoutShowcase extends React.Component {
+ *
+ *  public render(): React.ReactNode {
+ *    return (
+ *      <Layout level='2'>
+ *        <Text>Layout</Text>
+ *      </Layout>
+ *    );
+ *  }
  * }
  * ```
  * */
diff --git a/src/framework/ui/list/list.component.tsx b/src/framework/ui/list/list.component.tsx
index 81c166b4e..5acf65bc6 100644
--- a/src/framework/ui/list/list.component.tsx
+++ b/src/framework/ui/list/list.component.tsx
@@ -32,7 +32,7 @@ export type ListProps = StyledComponentProps & FlatListProps<ItemType> & Compone
 export type ListElement = React.ReactElement<ListProps>;
 
 /**
- * List component is a performant interface for rendering simple, flat lists. Extends `FlatList`. Renders list of
+ * `List` component is a performant interface for rendering simple, flat lists. Extends `FlatList`. Renders list of
  * `ListItem` components or custom content.
  *
  * @extends React.Component
@@ -44,7 +44,7 @@ export type ListElement = React.ReactElement<ListProps>;
  *
  * @property StyledComponentProps
  *
- * @example With ListItem example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -85,7 +85,7 @@ export type ListElement = React.ReactElement<ListProps>;
  * };
  * ```
  *
- * @example With Custom ListItem example
+ * @example With Custom ListItem
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/ui/list/listItem.component.tsx b/src/framework/ui/list/listItem.component.tsx
index 3328a0ce7..269881f31 100644
--- a/src/framework/ui/list/listItem.component.tsx
+++ b/src/framework/ui/list/listItem.component.tsx
@@ -67,8 +67,8 @@ export type ListItemProps = StyledComponentProps & TouchableIndexedProps & Compo
 export type ListItemElement = React.ReactElement<ListItemProps>;
 
 /**
- * ListItem is a support component for List.
- * The key feature of wrapping custom list items into ListItem component is that it automatically
+ * `ListItem` is a support component for `List`.
+ * The key feature of wrapping custom list items into `ListItem` component is that it automatically
  * picks background color fitting to current theme and responds to touches with feedback.
  *
  * @extends React.Component
@@ -92,7 +92,7 @@ export type ListItemElement = React.ReactElement<ListItemProps>;
  * @property {(index: number, event: GestureResponderEvent) => React.ReactElement<ImageProps>} onPress - Emits when
  * component is pressed.
  *
- * @example ListItem title and description template example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react'
@@ -109,7 +109,7 @@ export type ListItemElement = React.ReactElement<ListItemProps>;
  *  };
  * ```
  *
- * @example ListItem icon template example
+ * @example With Icon
  *
  * ```
  * import React from 'react'
@@ -134,7 +134,7 @@ export type ListItemElement = React.ReactElement<ListItemProps>;
  *  };
  * ```
  *
- * @example ListItem accessory template example
+ * @example With Accessory
  *
  * ```
  * import React from 'react'
@@ -158,7 +158,7 @@ export type ListItemElement = React.ReactElement<ListItemProps>;
  * };
  * ```
  *
- * @example Inline styling example
+ * @example Inline Styling
  *
  * ```
  * import React from 'react'
diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx
index 8ab383dca..8fe53be39 100644
--- a/src/framework/ui/modal/modal.component.tsx
+++ b/src/framework/ui/modal/modal.component.tsx
@@ -47,7 +47,7 @@ export type ModalProps = ViewProps & ComponentProps & ModalPresentingBased;
 export type ModalElement = React.ReactElement<ModalProps>;
 
 /**
- * Modal component is a wrapper than presents content above an enclosing view.
+ * `Modal` component is a wrapper than presents content above an enclosing view.
  *
  * @extends React.Component
  *
@@ -66,34 +66,146 @@ export type ModalElement = React.ReactElement<ModalProps>;
  *
  * @property ViewProps
  *
- * @example Modal usage and API example
+ * @overview-example Simple Usage
  *
  * ```
- * import { Modal } from 'react-native-ui-kitten';
- *
- * state: State = {
- *   visible: false,
- * };
- *
- * private setVisible = (visible: boolean): void => {
- *   this.setState({ visible });
- * };
- *
- * public render(): React.ReactNode {
- *   return (
- *     <View>
- *       <Button title='Show Modal' onPress={() => this.setVisible(true)}/>
- *       <Modal
- *         visible={this.state.visible}
- *         allowBackdrop={false}>
- *         <View>
- *           <Text>Hi! This is Modal Component!</Text>
- *           <Button title='Close Modal' onPress={() => this.setVisible(false)}/>
- *         <View/>
- *       </Modal>
- *     </View>
- *   )
+ * import React from 'react';
+ * import {
+ *   StyleSheet,
+ *   View,
+ *   ViewProps,
+ * } from 'react-native';
+ * import {
+ *   Button,
+ *   Modal,
+ *   Text,
+ *   Layout,
+ * } from 'react-native-ui-kitten';
+ *
+ * interface State {
+ *   modalVisible: boolean;
+ * }
+ *
+ * export class ModalShowcase extends React.Component<any, State> {
+ *
+ *   public state: State = {
+ *     modalVisible: false,
+ *   };
+ *
+ *   private setModalVisible = (): void => {
+ *     const modalVisible: boolean = !this.state.modalVisible;
+ *
+ *     this.setState({ modalVisible });
+ *   };
+ *
+ *   private renderModalElement = (): React.ReactElement<ViewProps> => {
+ *     return (
+ *       <Layout
+ *         level='3'
+ *         style={styles.modalContainer}>
+ *         <Text>This is modal</Text>
+ *         <Button onPress={this.setModalVisible}>Hide Modal</Button>
+ *       </Layout>
+ *     );
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <View style={styles.container}>
+ *         <Button onPress={this.setModalVisible}>Show Modal</Button>
+ *         <Modal visible={this.state.modalVisible}>
+ *           {this.renderModalElement()}
+ *         </Modal>
+ *       </View>
+ *     );
+ *   }
  * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     padding: 16,
+ *   },
+ *   modalContainer: {
+ *     width: 200,
+ *     height: 200,
+ *     justifyContent: 'center',
+ *     alignItems: 'center',
+ *   },
+ * });
+ * ```
+ *
+ * @example With Backdrop
+ *
+ * ```
+ * import React from 'react';
+ * import {
+ *   StyleSheet,
+ *   View,
+ *   ViewProps,
+ * } from 'react-native';
+ * import {
+ *   Button,
+ *   Modal,
+ *   Text,
+ *   Layout,
+ * } from 'react-native-ui-kitten';
+ *
+ * interface State {
+ *   modalVisible: boolean;
+ * }
+ *
+ * export class ModalShowcase extends React.Component<any, State> {
+ *
+ *   public state: State = {
+ *     modalVisible: false,
+ *   };
+ *
+ *   private setModalVisible = (): void => {
+ *     const modalVisible: boolean = !this.state.modalVisible;
+ *
+ *     this.setState({ modalVisible });
+ *   };
+ *
+ *   private renderModalElement = (): React.ReactElement<ViewProps> => {
+ *     return (
+ *       <Layout
+ *         level='3'
+ *         style={styles.modalContainer}>
+ *         <Text>This is modal</Text>
+ *         <Button onPress={this.setModalVisible}>Hide Modal</Button>
+ *       </Layout>
+ *     );
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <View style={styles.container}>
+ *         <Button onPress={this.setModalVisible}>Show Modal</Button>
+ *         <Modal
+ *           allowBackdrop={true}
+ *           backdropStyle={{ backgroundColor: 'black', opacity: 0.5 }}
+ *           onBackdropPress={this.setModalVisible}
+ *           visible={this.state.modalVisible}>
+ *           {this.renderModalElement()}
+ *         </Modal>
+ *       </View>
+ *     );
+ *   }
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     padding: 16,
+ *   },
+ *   modalContainer: {
+ *     width: 200,
+ *     height: 200,
+ *     justifyContent: 'center',
+ *     alignItems: 'center',
+ *   },
+ * });
  * ```
  * */
 
diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
index db97e8fea..374f97679 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -43,7 +43,7 @@ export type OverflowMenuProps = & StyledComponentProps & ComponentProps;
 export type OverflowMenuElement = React.ReactElement<OverflowMenuProps>;
 
 /**
- * Renders vertical list of menu items in a modal.
+ * `OverflowMenu` renders vertical list of menu items in a modal.
  *
  * @extends React.Component
  *
@@ -62,7 +62,7 @@ export type OverflowMenuElement = React.ReactElement<OverflowMenuProps>;
  *
  * @property StyledComponentProps
  *
- * @example OverflowMenu usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
index 6c3a82ffc..781bc7da2 100644
--- a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
@@ -44,9 +44,9 @@ export type OverflowMenuItemProps = StyledComponentProps & TouchableIndexedProps
 export type OverflowMenuItemElement = React.ReactElement<OverflowMenuItemProps>;
 
 /**
- * OverflowMenuItem is a part of the OverflowMenu component.
- * OverflowMenu items should be wrapped in OverflowMenu to provide usable component.
- * See usage examples at OverflowMenu component documentation.
+ * `OverflowMenuItem` is a part of the `OverflowMenu` component.
+ * `OverflowMenuItems` should be wrapped in `OverflowMenu` to provide usable component.
+ * See usage examples at `OverflowMenu` component documentation.
  *
  * @extends React.Component
  *
diff --git a/src/framework/ui/popover/measure.component.tsx b/src/framework/ui/popover/measure.component.tsx
index 5f4891913..4b3f4d121 100644
--- a/src/framework/ui/popover/measure.component.tsx
+++ b/src/framework/ui/popover/measure.component.tsx
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import React from 'react';
 import {
   findNodeHandle,
diff --git a/src/framework/ui/popover/placement.service.ts b/src/framework/ui/popover/placement.service.ts
index 61a8361f8..799e9efa3 100644
--- a/src/framework/ui/popover/placement.service.ts
+++ b/src/framework/ui/popover/placement.service.ts
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import {
   Frame,
   PlacementOptions,
diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx
index ff837919b..9c3632063 100644
--- a/src/framework/ui/popover/popover.component.tsx
+++ b/src/framework/ui/popover/popover.component.tsx
@@ -62,7 +62,7 @@ const TAG_CONTENT: number = 1;
 const PLACEMENT_DEFAULT: PopoverPlacement = PopoverPlacements.BOTTOM;
 
 /**
- * Displays content in a modal when users focus on or tap an element.
+ * Displays content in a `Modal` when users focus on or tap an element. Also supports autoplacement.
  *
  * @extends React.Component
  *
@@ -86,13 +86,13 @@ const PLACEMENT_DEFAULT: PopoverPlacement = PopoverPlacements.BOTTOM;
  *
  * @property StyledComponentProps
  *
- * @example Popover usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
  * import {
- *  View,
- *  ViewProps,
+ *   View,
+ *   ViewProps,
  * } from 'react-native';
  * import {
  *   Popover,
diff --git a/src/framework/ui/popover/popoverView.component.tsx b/src/framework/ui/popover/popoverView.component.tsx
index 90ce4fd39..016aad322 100644
--- a/src/framework/ui/popover/popoverView.component.tsx
+++ b/src/framework/ui/popover/popoverView.component.tsx
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import React from 'react';
 import {
   View,
diff --git a/src/framework/ui/popover/type.ts b/src/framework/ui/popover/type.ts
index c8cb13791..3f904b6a7 100644
--- a/src/framework/ui/popover/type.ts
+++ b/src/framework/ui/popover/type.ts
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import {
   FlexStyle,
   StyleProp,
diff --git a/src/framework/ui/radio/radio.component.tsx b/src/framework/ui/radio/radio.component.tsx
index 49677b0ba..8041d93e4 100644
--- a/src/framework/ui/radio/radio.component.tsx
+++ b/src/framework/ui/radio/radio.component.tsx
@@ -40,7 +40,7 @@ export type RadioProps = StyledComponentProps & TouchableOpacityProps & Componen
 export type RadioElement = React.ReactElement<RadioProps>;
 
 /**
- * Styled Radio component.
+ * Styled `Radio` component.
  *
  * @extends React.Component
  *
@@ -63,7 +63,7 @@ export type RadioElement = React.ReactElement<RadioProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -89,7 +89,34 @@ export type RadioElement = React.ReactElement<RadioProps>;
  * }
  * ```
  *
- * @example Inline styling example
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { Radio } from 'react-native-ui-kitten';
+ *
+ * export class RadioShowcase extends React.Component {
+ *   public state = {
+ *     checked: false,
+ *   };
+ *
+ *   private onChange = (checked: boolean) => {
+ *     this.setState({ checked });
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <Radio
+ *         status='warning'
+ *         checked={this.state.checked}
+ *         onChange={this.onChange}
+ *       />
+ *     )
+ *   }
+ * }
+ * ```
+ *
+ * @example Inline Styling
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/ui/radioGroup/radioGroup.component.tsx b/src/framework/ui/radioGroup/radioGroup.component.tsx
index dfe8b5523..462d37421 100644
--- a/src/framework/ui/radioGroup/radioGroup.component.tsx
+++ b/src/framework/ui/radioGroup/radioGroup.component.tsx
@@ -29,7 +29,7 @@ export type RadioGroupProps = StyledComponentProps & ViewProps & ComponentProps;
 export type RadioGroupElement = React.ReactElement<RadioGroupProps>;
 
 /**
- * Renders a group of radio buttons.
+ * Renders a group of `Radio` buttons.
  *
  * @extends React.Component
  *
@@ -44,7 +44,7 @@ export type RadioGroupElement = React.ReactElement<RadioGroupProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -73,6 +73,37 @@ export type RadioGroupElement = React.ReactElement<RadioGroupProps>;
  *   }
  * }
  * ```
+ *
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { Radio, RadioGroup } from 'react-native-ui-kitten';
+ *
+ * export class RadioGroupShowcase extends React.Component {
+ *
+ *   public state = {
+ *     selectedIndex: 0,
+ *   };
+ *
+ *   private onGroupSelectionChange = (selectedIndex: number) => {
+ *     this.setState({ selectedIndex });
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <RadioGroup
+ *         status='danger'
+ *         selectedIndex={this.state.selectedIndex}
+ *         onChange={this.onGroupSelectionChange}>
+ *         <Radio />
+ *         <Radio />
+ *         <Radio />
+ *       </RadioGroup>
+ *     );
+ *   }
+ * }
+ * ```
  */
 
 class RadioGroupComponent extends React.Component<RadioGroupProps> {
diff --git a/src/framework/ui/tab/tab.component.tsx b/src/framework/ui/tab/tab.component.tsx
index 902fdfc93..6abcf322c 100644
--- a/src/framework/ui/tab/tab.component.tsx
+++ b/src/framework/ui/tab/tab.component.tsx
@@ -42,9 +42,9 @@ export type TabProps = StyledComponentProps & TouchableOpacityProps & ComponentP
 export type TabElement = React.ReactElement<TabProps>;
 
 /**
- * Tab component is a part of TabBar or TabView component.
- * TabView Tabs should be wrapped in TabBar or TabView to provide usable component.
- * See usage examples at TabView component documentation.
+ * `Tab` component is a part of `TabBar` or `TabView` component.
+ * `TabView` Tabs should be wrapped in `TabBar` or `TabView` to provide usable component.
+ * See usage examples at `TabView` component documentation.
  *
  * @extends React.Component
  *
diff --git a/src/framework/ui/tab/tabBar.component.tsx b/src/framework/ui/tab/tabBar.component.tsx
index a4a4c7a1b..4487ad4d9 100644
--- a/src/framework/ui/tab/tabBar.component.tsx
+++ b/src/framework/ui/tab/tabBar.component.tsx
@@ -33,7 +33,7 @@ export type TabBarProps = StyledComponentProps & ViewProps & ComponentProps;
 export type TabBarElement = React.ReactElement<TabBarProps>;
 
 /**
- * The `TabBar` component that manages Tab components.
+ * The `TabBar` component that manages `Tab` components.
  *
  * @extends React.Component
  *
@@ -49,7 +49,7 @@ export type TabBarElement = React.ReactElement<TabBarProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/ui/tab/tabView.component.tsx b/src/framework/ui/tab/tabView.component.tsx
index 737622ba5..91ac384fc 100644
--- a/src/framework/ui/tab/tabView.component.tsx
+++ b/src/framework/ui/tab/tabView.component.tsx
@@ -43,7 +43,7 @@ export type TabViewProps = ViewProps & ComponentProps;
 export type TabViewElement = React.ReactElement<TabViewProps>;
 
 /**
- * Dynamic tabset component. Allows flipping through the tab "pages".
+ * `TabView` is a dynamic tabset component. Allows flipping through the tab "pages".
  *
  * @extends React.Component
  **
@@ -64,7 +64,7 @@ export type TabViewElement = React.ReactElement<TabViewProps>;
  *
  * @property ViewProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -102,7 +102,7 @@ export type TabViewElement = React.ReactElement<TabViewProps>;
  * }
  * ```
  *
- * @example Lazy loading usage example
+ * @example Lazy Loading
  *
  * ```
  * import React from 'react';
@@ -146,7 +146,7 @@ export type TabViewElement = React.ReactElement<TabViewProps>;
  * }
  * ```
  *
- * @example Inline styling example
+ * @example Inline Styling
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/ui/text/text.component.tsx b/src/framework/ui/text/text.component.tsx
index c4e53079d..88c0e113b 100644
--- a/src/framework/ui/text/text.component.tsx
+++ b/src/framework/ui/text/text.component.tsx
@@ -24,7 +24,7 @@ export type TextProps = StyledComponentProps & RNTextProps & ComponentProps;
 export type TextElement = React.ReactElement<TextProps>;
 
 /**
- * Styled Text component.
+ * Styled `Text` component.
  *
  * @extends React.Component
  *
@@ -45,7 +45,7 @@ export type TextElement = React.ReactElement<TextProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -59,6 +59,24 @@ export type TextElement = React.ReactElement<TextProps>;
  *   );
  * };
  * ```
+ *
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { Text, TextProps } from 'react-native-ui-kitten';
+ *
+ * export const TextShowcase = (props?: TextProps): React.ReactElement<TextProps> => {
+ *   return (
+ *     <Text
+ *       appearance='alternative'
+ *       category='p2'
+ *       status='success'>
+ *       Sample Text
+ *     </Text>
+ *   );
+ * };
+ * ```
  */
 
 export class TextComponent extends React.Component<TextProps> {
diff --git a/src/framework/ui/toggle/toggle.component.tsx b/src/framework/ui/toggle/toggle.component.tsx
index c0c4904be..4871a00ca 100644
--- a/src/framework/ui/toggle/toggle.component.tsx
+++ b/src/framework/ui/toggle/toggle.component.tsx
@@ -39,7 +39,7 @@ export type ToggleProps = StyledComponentProps & ViewProps & ComponentProps;
 export type ToggleElement = React.ReactElement<ToggleProps>;
 
 /**
- * Styled Toggle component.
+ * Styled `Toggle` component.
  *
  * @extends React.Component
  *
@@ -62,7 +62,7 @@ export type ToggleElement = React.ReactElement<ToggleProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -88,6 +88,35 @@ export type ToggleElement = React.ReactElement<ToggleProps>;
  *   }
  * }
  * ```
+ *
+ * @overview-example Eva Styling
+ *
+ * ```
+ * import React from 'react';
+ * import { Toggle } from 'react-native-ui-kitten';
+ *
+ * export class ToggleShowcase extends React.Component {
+ *
+ *   public state = {
+ *     checked: false,
+ *   };
+ *
+ *   private onChange = (checked: boolean) => {
+ *     this.setState({ checked });
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <Toggle
+ *         size='small'
+ *         status='info'
+ *         checked={this.state.checked}
+ *         onChange={this.onChange}
+ *       />
+ *     );
+ *   }
+ * }
+ * ```
  */
 export class ToggleComponent extends React.Component<ToggleProps> implements PanResponderCallbacks {
 
diff --git a/src/framework/ui/tooltip/tooltip.component.tsx b/src/framework/ui/tooltip/tooltip.component.tsx
index beb20bfbe..b8a3b5113 100644
--- a/src/framework/ui/tooltip/tooltip.component.tsx
+++ b/src/framework/ui/tooltip/tooltip.component.tsx
@@ -50,7 +50,7 @@ export type TooltipProps = StyledComponentProps & ComponentProps;
 export type TooltipElement = React.ReactElement<TooltipProps>;
 
 /**
- * Displays informative text when users focus on or tap an element.
+ * `Tooltip` displays informative text when users focus on or tap an element.
  *
  * @extends React.Component
  *
@@ -78,7 +78,7 @@ export type TooltipElement = React.ReactElement<TooltipProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -111,6 +111,92 @@ export type TooltipElement = React.ReactElement<TooltipProps>;
  *   }
  * }
  * ```
+ *
+ * @example With Icon
+ *
+ * ```
+ * import React from 'react';
+ * import {
+ *   Image,
+ *   ImageProps,
+ * } from 'react-native';
+ * import {
+ *   Tooltip,
+ *   Button,
+ *   StyleType,
+ * } from 'react-native-ui-kitten';
+ *
+ * export class TooltipShowcase extends React.Component {
+ *
+ *   public state = {
+ *     tooltipVisible: false,
+ *   };
+ *
+ *   private toggleTooltip = () => {
+ *     this.setState({ tooltipVisible: !this.state.tooltipVisible });
+ *   };
+ *
+ *   private renderIcon = (style: StyleType): React.ReactElement<ImageProps> => {
+ *     return (
+ *       <Image
+ *         style={style}
+ *         source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}
+ *       />
+ *     );
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <Tooltip
+ *         visible={this.state.tooltipVisible}
+ *         text='Tooltip Text'
+ *         textStyle={{ color: 'red', fontSize: 15 }}
+ *         icon={this.renderIcon}
+ *         onBackdropPress={this.toggleTooltip}>
+ *         <Button onPress={this.toggleTooltip}>
+ *           TOGGLE TOOLTIP
+ *         </Button>
+ *       </Tooltip>
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * @example Inline Styling
+ *
+ * ```
+ * import React from 'react';
+ * import {
+ *   Tooltip,
+ *   Button,
+ *   StyleType,
+ * } from 'react-native-ui-kitten';
+ *
+ * export class TooltipShowcase extends React.Component {
+ *
+ *   public state = {
+ *     tooltipVisible: false,
+ *   };
+ *
+ *   private toggleTooltip = () => {
+ *     this.setState({ tooltipVisible: !this.state.tooltipVisible });
+ *   };
+ *
+ *   public render(): React.ReactNode {
+ *     return (
+ *       <Tooltip
+ *         visible={this.state.tooltipVisible}
+ *         text='Tooltip Text'
+ *         textStyle={{ color: 'red', fontSize: 15 }}
+ *         onBackdropPress={this.toggleTooltip}>
+ *         <Button onPress={this.toggleTooltip}>
+ *           TOGGLE TOOLTIP
+ *         </Button>
+ *       </Tooltip>
+ *     );
+ *   }
+ * }
+ * ```
  */
 
 export class TooltipComponent extends React.Component<TooltipProps> {
diff --git a/src/framework/ui/topNavigation/topNavigation.component.tsx b/src/framework/ui/topNavigation/topNavigation.component.tsx
index a4c68881d..719ec9eda 100644
--- a/src/framework/ui/topNavigation/topNavigation.component.tsx
+++ b/src/framework/ui/topNavigation/topNavigation.component.tsx
@@ -41,7 +41,7 @@ export type TopNavigationProps = StyledComponentProps & ViewProps & ComponentPro
 export type TopNavigationElement = React.ReactElement<TopNavigationProps>;
 
 /**
- * TopNavigation component is designed to be a Navigation Bar.
+ * `TopNavigation` component is designed to be a Navigation Bar.
  * Can be used for navigation.
  *
  * @extends React.Component
@@ -67,7 +67,7 @@ export type TopNavigationElement = React.ReactElement<TopNavigationProps>;
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -84,7 +84,7 @@ export type TopNavigationElement = React.ReactElement<TopNavigationProps>;
  * };
  * ```
  *
- * @example Actions usage example
+ * @overview-example Actions
  *
  * ```
  * import React from 'react';
@@ -128,7 +128,7 @@ export type TopNavigationElement = React.ReactElement<TopNavigationProps>;
  * };
  * ```
  *
- * @example Inline styling example
+ * @example Inline Styling
  *
  * ```
  * import React from 'react';
diff --git a/src/framework/ui/topNavigation/topNavigationAction.component.tsx b/src/framework/ui/topNavigation/topNavigationAction.component.tsx
index e1e74bf72..c064085c6 100644
--- a/src/framework/ui/topNavigation/topNavigationAction.component.tsx
+++ b/src/framework/ui/topNavigation/topNavigationAction.component.tsx
@@ -33,9 +33,9 @@ export type TopNavigationActionProps = StyledComponentProps & TouchableOpacityPr
 export type TopNavigationActionElement = React.ReactElement<TopNavigationActionProps>;
 
 /**
- * The `TopNavigationAction` component is a part of the TopNavigation component.
- * Top Navigation Actions should be used in TopNavigation to provide usable component.
- * See usage examples at TopNavigation component documentation.
+ * The `TopNavigationAction` component is a part of the `TopNavigation` component.
+ * `TopNavigationActions` should be used in `TopNavigation` to provide usable component.
+ * See usage examples at `TopNavigation` component documentation.
  *
  * @extends React.Component
  *
diff --git a/src/framework/ui/viewPager/viewPager.component.tsx b/src/framework/ui/viewPager/viewPager.component.tsx
index 4b84e39bb..a95bb6747 100644
--- a/src/framework/ui/viewPager/viewPager.component.tsx
+++ b/src/framework/ui/viewPager/viewPager.component.tsx
@@ -36,7 +36,7 @@ export type ViewPagerProps = ViewProps & ComponentProps;
 export type ViewPagerElement = React.ReactElement<ViewPagerProps>;
 
 /**
- * Allows flipping through the "pages".
+ * `ViewPager` allows flipping through the "pages".
  *
  * @extends React.Component
  *
@@ -53,7 +53,7 @@ export type ViewPagerElement = React.ReactElement<ViewPagerProps>;
  *
  * @property ScrollViewProps
  *
- * @example Simple usage example
+ * @overview-example Simple Usage
  *
  * ```
  * import React from 'react';
@@ -88,7 +88,7 @@ export type ViewPagerElement = React.ReactElement<ViewPagerProps>;
  * }
  * ```
  *
- * @example Lazy loading usage example
+ * @example Lazy Loading
  *
  * ```
  * import React from 'react';