diff --git a/types/reactstrap/v7/index.d.ts b/types/reactstrap/v7/index.d.ts
new file mode 100644
index 0000000000..adadd7886a
--- /dev/null
+++ b/types/reactstrap/v7/index.d.ts
@@ -0,0 +1,267 @@
+// Type definitions for reactstrap 7.1
+// Project: https://github.com/reactstrap/reactstrap#readme
+// Definitions by: Ali Hammad Baig <https://github.com/alihammad>
+//                 Marco Falkenberg <https://github.com/mfal>
+//                 Danilo Barros <https://github.com/danilobjr>
+//                 FaithForHumans <https://github.com/FaithForHumans>
+//                 Tim Chen <https://github.com/timc13>
+//                 Pat Gaffney <https://github.com/patrickrgaffney>
+//                 Prabodh Tiwari <https://github.com/prabodht>
+//                 Georg Steinmetz <https://github.com/georg94>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.9
+
+export interface CSSModule {
+  [className: string]: string;
+}
+
+import { default as Alert_ } from './lib/Alert';
+export class Alert<T = {}> extends Alert_<T> {}
+export { AlertProps } from './lib/Alert';
+import { default as Badge_ } from './lib/Badge';
+export class Badge<T = {}> extends Badge_<T> {}
+export { BadgeProps } from './lib/Badge';
+import { default as Breadcrumb_ } from './lib/Breadcrumb';
+export class Breadcrumb<T = {}> extends Breadcrumb_<T> {}
+export { BreadcrumbProps } from './lib/Breadcrumb';
+import { default as BreadcrumbItem_ } from './lib/BreadcrumbItem';
+export class BreadcrumbItem<T = {}> extends BreadcrumbItem_<T> {}
+export { BreadcrumbItemProps } from './lib/BreadcrumbItem';
+import { default as Button_ } from './lib/Button';
+export class Button<T = {}> extends Button_<T> {}
+export { ButtonProps } from './lib/Button';
+import { default as ButtonDropdown_ } from './lib/ButtonDropdown';
+export class ButtonDropdown<T = {}> extends ButtonDropdown_<T> {}
+export { ButtonDropdownProps } from './lib/ButtonDropdown';
+import { default as ButtonGroup_ } from './lib/ButtonGroup';
+export class ButtonGroup<T = {}> extends ButtonGroup_<T> {}
+export { ButtonGroupProps } from './lib/ButtonGroup';
+import { default as ButtonToolbar_ } from './lib/ButtonToolbar';
+export class ButtonToolbar<T = {}> extends ButtonToolbar_<T> {}
+export { ButtonToolbarProps } from './lib/ButtonToolbar';
+import { default as Card_ } from './lib/Card';
+export class Card<T = {}> extends Card_<T> {}
+export { CardProps } from './lib/Card';
+import { default as CardBody_ } from './lib/CardBody';
+export class CardBody<T = {}> extends CardBody_<T> {}
+export { CardBodyProps } from './lib/CardBody';
+import { default as CardColumns_ } from './lib/CardColumns';
+export class CardColumns<T = {}> extends CardColumns_<T> {}
+export { CardColumnsProps } from './lib/CardColumns';
+import { default as CardDeck_ } from './lib/CardDeck';
+export class CardDeck<T = {}> extends CardDeck_<T> {}
+export { CardDeckProps } from './lib/CardDeck';
+import { default as CardFooter_ } from './lib/CardFooter';
+export class CardFooter<T = {}> extends CardFooter_<T> {}
+export { CardFooterProps } from './lib/CardFooter';
+import { default as CardGroup_ } from './lib/CardGroup';
+export class CardGroup<T = {}> extends CardGroup_<T> {}
+export { CardGroupProps } from './lib/CardGroup';
+import { default as CardHeader_ } from './lib/CardHeader';
+export class CardHeader<T = {}> extends CardHeader_<T> {}
+export { CardHeaderProps } from './lib/CardHeader';
+import { default as CardImg_ } from './lib/CardImg';
+export class CardImg<T = {}> extends CardImg_<T> {}
+export { CardImgProps } from './lib/CardImg';
+import { default as CardImgOverlay_ } from './lib/CardImgOverlay';
+export class CardImgOverlay<T = {}> extends CardImgOverlay_<T> {}
+export { CardImgOverlayProps } from './lib/CardImgOverlay';
+import { default as CardLink_ } from './lib/CardLink';
+export class CardLink<T = {}> extends CardLink_<T> {}
+export { CardLinkProps } from './lib/CardLink';
+import { default as CardSubtitle_ } from './lib/CardSubtitle';
+export class CardSubtitle<T = {}> extends CardSubtitle_<T> {}
+export { CardSubtitleProps } from './lib/CardSubtitle';
+import { default as CardText_ } from './lib/CardText';
+export class CardText<T = {}> extends CardText_<T> {}
+export { CardTextProps } from './lib/CardText';
+import { default as CardTitle_ } from './lib/CardTitle';
+export class CardTitle<T = {}> extends CardTitle_<T> {}
+export { CardTitleProps } from './lib/CardTitle';
+import { default as Carousel_ } from './lib/Carousel';
+export class Carousel<T = {}> extends Carousel_<T> {}
+export { CarouselProps } from './lib/Carousel';
+import { default as CarouselItem_ } from './lib/CarouselItem';
+export class CarouselItem<T = {}> extends CarouselItem_<T> {}
+export { CarouselItemProps } from './lib/CarouselItem';
+import { default as CarouselControl_ } from './lib/CarouselControl';
+export class CarouselControl<T = {}> extends CarouselControl_<T> {}
+export { CarouselControlProps } from './lib/CarouselControl';
+import { default as CarouselIndicators_ } from './lib/CarouselIndicators';
+export class CarouselIndicators<T = {}> extends CarouselIndicators_<T> {}
+export { CarouselIndicatorsProps } from './lib/CarouselIndicators';
+import { default as CarouselCaption_ } from './lib/CarouselCaption';
+export class CarouselCaption<T = {}> extends CarouselCaption_<T> {}
+export { CarouselCaptionProps } from './lib/CarouselCaption';
+import { default as Col_ } from './lib/Col';
+export class Col<T = {}> extends Col_<T> {}
+export { ColProps } from './lib/Col';
+import { default as Collapse_ } from './lib/Collapse';
+export class Collapse<T = {}> extends Collapse_<T> {}
+export { CollapseProps } from './lib/Collapse';
+import { default as Container_ } from './lib/Container';
+export class Container<T = {}> extends Container_<T> {}
+export { ContainerProps } from './lib/Container';
+import { default as CustomInput_ } from './lib/CustomInput';
+export class CustomInput<T = {}> extends CustomInput_<T> {}
+export { CustomInputProps } from './lib/CustomInput';
+import { default as Dropdown_ } from './lib/Dropdown';
+export class Dropdown<T = {}> extends Dropdown_<T> {}
+export { DropdownProps } from './lib/Dropdown';
+import { default as DropdownItem_ } from './lib/DropdownItem';
+export class DropdownItem<T = {}> extends DropdownItem_<T> {}
+export { DropdownItemProps } from './lib/DropdownItem';
+import { default as DropdownMenu_ } from './lib/DropdownMenu';
+export class DropdownMenu<T = {}> extends DropdownMenu_<T> {}
+export { DropdownMenuProps } from './lib/DropdownMenu';
+import { default as DropdownToggle_ } from './lib/DropdownToggle';
+export class DropdownToggle<T = {}> extends DropdownToggle_<T> {}
+export { DropdownToggleProps } from './lib/DropdownToggle';
+import { default as Fade_ } from './lib/Fade';
+export class Fade<T = {}> extends Fade_<T> {}
+export { FadeProps } from './lib/Fade';
+import { default as Form_ } from './lib/Form';
+export class Form<T = {}> extends Form_<T> {}
+export { FormProps } from './lib/Form';
+import { default as FormFeedback_ } from './lib/FormFeedback';
+export class FormFeedback<T = {}> extends FormFeedback_<T> {}
+export { FormFeedbackProps } from './lib/FormFeedback';
+import { default as FormGroup_ } from './lib/FormGroup';
+export class FormGroup<T = {}> extends FormGroup_<T> {}
+export { FormGroupProps } from './lib/FormGroup';
+import { default as FormText_ } from './lib/FormText';
+export class FormText<T = {}> extends FormText_<T> {}
+export { FormTextProps } from './lib/FormText';
+import { default as Input_ } from './lib/Input';
+export class Input<T = {}> extends Input_<T> {}
+export { InputProps } from './lib/Input';
+import { default as InputGroup_ } from './lib/InputGroup';
+export class InputGroup<T = {}> extends InputGroup_<T> {}
+export { InputGroupProps } from './lib/InputGroup';
+import { default as InputGroupAddon_ } from './lib/InputGroupAddon';
+export class InputGroupAddon<T = {}> extends InputGroupAddon_<T> {}
+export { InputGroupAddonProps } from './lib/InputGroupAddon';
+import { default as InputGroupButtonDropdown_ } from './lib/InputGroupButtonDropdown';
+export class InputGroupButtonDropdown<T = {}> extends InputGroupButtonDropdown_<T> {}
+export { InputGroupButtonDropdownProps } from './lib/InputGroupButtonDropdown';
+import { default as InputGroupText_ } from './lib/InputGroupText';
+export class InputGroupText<T = {}> extends InputGroupText_<T> {}
+export { InputGroupTextProps } from './lib/InputGroupText';
+import { default as Jumbotron_ } from './lib/Jumbotron';
+export class Jumbotron<T = {}> extends Jumbotron_<T> {}
+export { JumbotronProps } from './lib/Jumbotron';
+import { default as Label_ } from './lib/Label';
+export class Label<T = {}> extends Label_<T> {}
+export { LabelProps } from './lib/Label';
+import { default as ListGroup_ } from './lib/ListGroup';
+export class ListGroup<T = {}> extends ListGroup_<T> {}
+export { ListGroupProps } from './lib/ListGroup';
+import { default as ListGroupItem_ } from './lib/ListGroupItem';
+export class ListGroupItem<T = {}> extends ListGroupItem_<T> {}
+export { ListGroupItemProps } from './lib/ListGroupItem';
+import { default as ListGroupItemHeading_ } from './lib/ListGroupItemHeading';
+export class ListGroupItemHeading<T = {}> extends ListGroupItemHeading_<T> {}
+export { ListGroupItemHeadingProps } from './lib/ListGroupItemHeading';
+import { default as ListGroupItemText_ } from './lib/ListGroupItemText';
+export class ListGroupItemText<T = {}> extends ListGroupItemText_<T> {}
+export { ListGroupItemTextProps } from './lib/ListGroupItemText';
+import { default as Media_ } from './lib/Media';
+export class Media<T = {}> extends Media_<T> {}
+export { MediaProps } from './lib/Media';
+import { default as Modal_ } from './lib/Modal';
+export class Modal<T = {}> extends Modal_<T> {}
+export { ModalProps } from './lib/Modal';
+import { default as ModalBody_ } from './lib/ModalBody';
+export class ModalBody<T = {}> extends ModalBody_<T> {}
+export { ModalBodyProps } from './lib/ModalBody';
+import { default as ModalFooter_ } from './lib/ModalFooter';
+export class ModalFooter<T = {}> extends ModalFooter_<T> {}
+export { ModalFooterProps } from './lib/ModalFooter';
+import { default as ModalHeader_ } from './lib/ModalHeader';
+export class ModalHeader<T = {}> extends ModalHeader_<T> {}
+export { ModalHeaderProps } from './lib/ModalHeader';
+import { default as Nav_ } from './lib/Nav';
+export class Nav<T = {}> extends Nav_<T> {}
+export { NavProps } from './lib/Nav';
+import { default as Navbar_ } from './lib/Navbar';
+export class Navbar<T = {}> extends Navbar_<T> {}
+export { NavbarProps } from './lib/Navbar';
+import { default as NavbarBrand_ } from './lib/NavbarBrand';
+export class NavbarBrand<T = {}> extends NavbarBrand_<T> {}
+export { NavbarBrandProps } from './lib/NavbarBrand';
+import { default as NavbarToggler_ } from './lib/NavbarToggler';
+export class NavbarToggler<T = {}> extends NavbarToggler_<T> {}
+export { NavbarTogglerProps } from './lib/NavbarToggler';
+import { default as NavItem_ } from './lib/NavItem';
+export class NavItem<T = {}> extends NavItem_<T> {}
+export { NavItemProps } from './lib/NavItem';
+import { default as NavLink_ } from './lib/NavLink';
+export class NavLink<T = {}> extends NavLink_<T> {}
+export { NavLinkProps } from './lib/NavLink';
+import { default as Pagination_ } from './lib/Pagination';
+export class Pagination<T = {}> extends Pagination_<T> {}
+export { PaginationProps } from './lib/Pagination';
+import { default as PaginationItem_ } from './lib/PaginationItem';
+export class PaginationItem<T = {}> extends PaginationItem_<T> {}
+export { PaginationItemProps } from './lib/PaginationItem';
+import { default as PaginationLink_ } from './lib/PaginationLink';
+export class PaginationLink<T = {}> extends PaginationLink_<T> {}
+export { PaginationLinkProps } from './lib/PaginationLink';
+import { default as Popover_ } from './lib/Popover';
+export class Popover<T = {}> extends Popover_<T> {}
+export { PopoverProps } from './lib/Popover';
+import { default as PopoverBody_ } from './lib/PopoverBody';
+export class PopoverBody<T = {}> extends PopoverBody_<T> {}
+export { PopoverBodyProps } from './lib/PopoverBody';
+import { default as PopoverHeader_ } from './lib/PopoverHeader';
+export class PopoverHeader<T = {}> extends PopoverHeader_<T> {}
+export { PopoverHeaderProps } from './lib/PopoverHeader';
+import { default as Progress_ } from './lib/Progress';
+export class Progress<T = {}> extends Progress_<T> {}
+export { ProgressProps } from './lib/Progress';
+import { default as Row_ } from './lib/Row';
+export class Row<T = {}> extends Row_<T> {}
+export { RowProps } from './lib/Row';
+import { default as Spinner_ } from './lib/Spinner';
+export class Spinner<T = {}> extends Spinner_<T> {}
+export { SpinnerProps } from './lib/Spinner';
+import { default as TabContent_ } from './lib/TabContent';
+export class TabContent<T = {}> extends TabContent_<T> {}
+export { TabContentProps } from './lib/TabContent';
+import { default as Table_ } from './lib/Table';
+export class Table<T = {}> extends Table_<T> {}
+export { TableProps } from './lib/Table';
+import { default as TabPane_ } from './lib/TabPane';
+export class TabPane<T = {}> extends TabPane_<T> {}
+export { TabPaneProps } from './lib/TabPane';
+import { default as Tag_ } from './lib/Tag';
+export class Tag<T = {}> extends Tag_<T> {}
+export { TagProps } from './lib/Tag';
+import { default as Tooltip_ } from './lib/Tooltip';
+export class Tooltip<T = {}> extends Tooltip_<T> {}
+export { TooltipProps } from './lib/Tooltip';
+import {
+  UncontrolledAlert as UncontrolledAlert_,
+  UncontrolledButtonDropdown as UncontrolledButtonDropdown_,
+  UncontrolledDropdown as UncontrolledDropdown_,
+  UncontrolledTooltip as UncontrolledTooltip_,
+  UncontrolledCollapse as UncontrolledCollapse_,
+  UncontrolledCarousel as UncontrolledCarousel_,
+  UncontrolledPopover as UncontrolledPopover_
+} from './lib/Uncontrolled';
+export class UncontrolledAlert<T = {}> extends UncontrolledAlert_<T> {}
+export class UncontrolledButtonDropdown<T = {}> extends UncontrolledButtonDropdown_<T> {}
+export class UncontrolledDropdown<T = {}> extends UncontrolledDropdown_<T> {}
+export class UncontrolledTooltip<T = {}> extends UncontrolledTooltip_<T> {}
+export class UncontrolledCollapse<T = {}> extends UncontrolledCollapse_<T> {}
+export class UncontrolledCarousel<T = {}> extends UncontrolledCarousel_<T> {}
+export class UncontrolledPopover<T = {}> extends UncontrolledPopover_<T> {}
+export {
+  UncontrolledButtonDropdownProps,
+  UncontrolledAlertProps,
+  UncontrolledDropdownProps,
+  UncontrolledTooltipProps,
+  UncontrolledCollapseProps,
+  UncontrolledCarouselProps,
+  UncontrolledPopoverProps
+} from './lib/Uncontrolled';
diff --git a/types/reactstrap/v7/lib/Alert.d.ts b/types/reactstrap/v7/lib/Alert.d.ts
new file mode 100644
index 0000000000..5aa58f862a
--- /dev/null
+++ b/types/reactstrap/v7/lib/Alert.d.ts
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+import { FadeProps } from './Fade';
+
+export type UncontrolledProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  className?: string;
+  cssModule?: CSSModule;
+  color?: string;
+  tag?: React.ReactType;
+  transition?: FadeProps;
+} & T;
+export type UncontrolledAlertProps<T = {}> = UncontrolledProps<T>;
+
+export type AlertProps<T = {}> = UncontrolledAlertProps<T> & {
+  isOpen?: boolean;
+  toggle?: () => void;
+};
+
+declare class Alert<T = {[key: string]: any}> extends React.Component<AlertProps<T>> {}
+export default Alert;
diff --git a/types/reactstrap/v7/lib/Badge.d.ts b/types/reactstrap/v7/lib/Badge.d.ts
new file mode 100644
index 0000000000..651521ac67
--- /dev/null
+++ b/types/reactstrap/v7/lib/Badge.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type BadgeProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  color?: string;
+  pill?: boolean;
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Badge<T = {[key: string]: any}> extends React.Component<BadgeProps<T>> {}
+export default Badge;
diff --git a/types/reactstrap/v7/lib/Breadcrumb.d.ts b/types/reactstrap/v7/lib/Breadcrumb.d.ts
new file mode 100644
index 0000000000..9fd2385041
--- /dev/null
+++ b/types/reactstrap/v7/lib/Breadcrumb.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type BreadcrumbProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: string;
+  className?: string;
+  listTag?: string;
+  listClassName?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Breadcrumb<T = {[key: string]: any}> extends React.Component<BreadcrumbProps<T>> {}
+export default Breadcrumb;
diff --git a/types/reactstrap/v7/lib/BreadcrumbItem.d.ts b/types/reactstrap/v7/lib/BreadcrumbItem.d.ts
new file mode 100644
index 0000000000..a3ce8156bf
--- /dev/null
+++ b/types/reactstrap/v7/lib/BreadcrumbItem.d.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type BreadcrumbItemProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  active?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  // if a is passed as a string
+  // this could be href
+  [others: string]: any;
+} & T;
+
+declare class BreadcrumbItem<T = {[key: string]: any}> extends React.Component<BreadcrumbItemProps<T>> {}
+export default BreadcrumbItem;
diff --git a/types/reactstrap/v7/lib/Button.d.ts b/types/reactstrap/v7/lib/Button.d.ts
new file mode 100644
index 0000000000..f19ecf4e32
--- /dev/null
+++ b/types/reactstrap/v7/lib/Button.d.ts
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ButtonProps<T = {}> = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  outline?: boolean;
+  active?: boolean;
+  block?: boolean;
+  color?: string;
+  disabled?: boolean;
+  tag?: React.ReactType;
+  innerRef?: React.Ref<HTMLButtonElement>;
+
+  onClick?: React.MouseEventHandler<any>;
+  size?: any;
+  id?: string;
+  style?: React.CSSProperties;
+
+  cssModule?: CSSModule;
+} & T;
+
+declare class Button<T = {[key: string]: any}> extends React.Component<ButtonProps<T>> {}
+export default Button;
diff --git a/types/reactstrap/v7/lib/ButtonDropdown.d.ts b/types/reactstrap/v7/lib/ButtonDropdown.d.ts
new file mode 100644
index 0000000000..92f16ce5ce
--- /dev/null
+++ b/types/reactstrap/v7/lib/ButtonDropdown.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { UncontrolledDropdownProps, DropdownProps } from './Dropdown';
+
+export type UncontrolledProps<T = {}> = UncontrolledDropdownProps<T>;
+export type UncontrolledButtonDropdownProps<T = {}> = UncontrolledProps<T>;
+
+export type ButtonDropdownProps<T = {}> = DropdownProps<T>;
+
+declare class ButtonDropdown<T = {[key: string]: any}> extends React.Component<ButtonDropdownProps<T>> {}
+export default ButtonDropdown;
diff --git a/types/reactstrap/v7/lib/ButtonGroup.d.ts b/types/reactstrap/v7/lib/ButtonGroup.d.ts
new file mode 100644
index 0000000000..736f894165
--- /dev/null
+++ b/types/reactstrap/v7/lib/ButtonGroup.d.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ButtonGroupProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  'aria-label'?: string;
+  className?: string;
+  cssModule?: CSSModule;
+  role?: string;
+  size?: string;
+  vertical?: boolean;
+} & T;
+
+declare class ButtonGroup<T = {[key: string]: any}> extends React.Component<ButtonGroupProps<T>> {}
+export default ButtonGroup;
diff --git a/types/reactstrap/v7/lib/ButtonToolbar.d.ts b/types/reactstrap/v7/lib/ButtonToolbar.d.ts
new file mode 100644
index 0000000000..b19fff3274
--- /dev/null
+++ b/types/reactstrap/v7/lib/ButtonToolbar.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ButtonToolbarProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  'aria-label'?: string;
+  className?: string;
+  cssModule?: CSSModule;
+  role?: string;
+} & T;
+
+declare class ButtonToolbar<T = {[key: string]: any}> extends React.Component<ButtonToolbarProps<T>> {}
+export default ButtonToolbar;
diff --git a/types/reactstrap/v7/lib/Card.d.ts b/types/reactstrap/v7/lib/Card.d.ts
new file mode 100644
index 0000000000..772cad5a89
--- /dev/null
+++ b/types/reactstrap/v7/lib/Card.d.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  inverse?: boolean;
+  color?: string;
+  block?: boolean;
+  body?: boolean;
+  outline?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  style?: React.CSSProperties;
+} & T;
+
+declare class Card<T = {[key: string]: any}> extends React.Component<CardProps<T>> {}
+export default Card;
diff --git a/types/reactstrap/v7/lib/CardBody.d.ts b/types/reactstrap/v7/lib/CardBody.d.ts
new file mode 100644
index 0000000000..d8bcac515b
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardBody.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardBodyProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardBody<T = {[key: string]: any}> extends React.Component<CardBodyProps<T>> {}
+export default CardBody;
diff --git a/types/reactstrap/v7/lib/CardColumns.d.ts b/types/reactstrap/v7/lib/CardColumns.d.ts
new file mode 100644
index 0000000000..ccce622907
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardColumns.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardColumnsProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardColumns<T = {[key: string]: any}> extends React.Component<CardColumnsProps<T>> {}
+export default CardColumns;
diff --git a/types/reactstrap/v7/lib/CardDeck.d.ts b/types/reactstrap/v7/lib/CardDeck.d.ts
new file mode 100644
index 0000000000..88f1166339
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardDeck.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardDeckProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardDeck<T = {[key: string]: any}> extends React.Component<CardDeckProps<T>> {}
+export default CardDeck;
diff --git a/types/reactstrap/v7/lib/CardFooter.d.ts b/types/reactstrap/v7/lib/CardFooter.d.ts
new file mode 100644
index 0000000000..c65ba5f8cf
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardFooter.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardFooterProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardFooter<T = {[key: string]: any}> extends React.Component<CardFooterProps<T>> {}
+export default CardFooter;
diff --git a/types/reactstrap/v7/lib/CardGroup.d.ts b/types/reactstrap/v7/lib/CardGroup.d.ts
new file mode 100644
index 0000000000..be33a187d5
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardGroup.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardGroupProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardGroup<T = {[key: string]: any}> extends React.Component<CardGroupProps<T>> {}
+export default CardGroup;
diff --git a/types/reactstrap/v7/lib/CardHeader.d.ts b/types/reactstrap/v7/lib/CardHeader.d.ts
new file mode 100644
index 0000000000..ac46ca37ba
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardHeader.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardHeaderProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardHeader<T = {[key: string]: any}> extends React.Component<CardHeaderProps<T>> {}
+export default CardHeader;
diff --git a/types/reactstrap/v7/lib/CardImg.d.ts b/types/reactstrap/v7/lib/CardImg.d.ts
new file mode 100644
index 0000000000..6c77d88257
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardImg.d.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardImgProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  top?: boolean;
+  bottom?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  src?: string;
+  width?: string;
+  height?: string;
+  alt?: string;
+} & T;
+
+declare class CardImg<T = {[key: string]: any}> extends React.Component<CardImgProps<T>> {}
+export default CardImg;
diff --git a/types/reactstrap/v7/lib/CardImgOverlay.d.ts b/types/reactstrap/v7/lib/CardImgOverlay.d.ts
new file mode 100644
index 0000000000..f4da865ae7
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardImgOverlay.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardImgOverlayProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardImgOverlay<T = {[key: string]: any}> extends React.Component<CardImgOverlayProps<T>> {}
+export default CardImgOverlay;
diff --git a/types/reactstrap/v7/lib/CardLink.d.ts b/types/reactstrap/v7/lib/CardLink.d.ts
new file mode 100644
index 0000000000..359cb6e32a
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardLink.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardLinkProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  innerRef?: React.Ref<HTMLAnchorElement>;
+  className?: string;
+  cssModule?: CSSModule;
+  href?: string;
+} & T;
+
+declare class CardLink<T = {[key: string]: any}> extends React.Component<CardLinkProps<T>> {}
+export default CardLink;
diff --git a/types/reactstrap/v7/lib/CardSubtitle.d.ts b/types/reactstrap/v7/lib/CardSubtitle.d.ts
new file mode 100644
index 0000000000..8e379ceaa1
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardSubtitle.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardSubtitleProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardSubtitle<T = {[key: string]: any}> extends React.Component<CardSubtitleProps<T>> {}
+export default CardSubtitle;
diff --git a/types/reactstrap/v7/lib/CardText.d.ts b/types/reactstrap/v7/lib/CardText.d.ts
new file mode 100644
index 0000000000..fd3fb8eba9
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardText.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardTextProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardText<T = {[key: string]: any}> extends React.Component<CardTextProps<T>> {}
+export default CardText;
diff --git a/types/reactstrap/v7/lib/CardTitle.d.ts b/types/reactstrap/v7/lib/CardTitle.d.ts
new file mode 100644
index 0000000000..0d6bad3c89
--- /dev/null
+++ b/types/reactstrap/v7/lib/CardTitle.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CardTitleProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CardTitle<T = {[key: string]: any}> extends React.Component<CardTitleProps<T>> {}
+export default CardTitle;
diff --git a/types/reactstrap/v7/lib/Carousel.d.ts b/types/reactstrap/v7/lib/Carousel.d.ts
new file mode 100644
index 0000000000..69899eff34
--- /dev/null
+++ b/types/reactstrap/v7/lib/Carousel.d.ts
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CarouselProps<T = {}> = React.HTMLProps<HTMLElement> & {
+    activeIndex?: number;
+    next: () => void;
+    previous: () => void;
+    keyboard?: boolean;
+    pause?: 'hover' | false;
+    ride?: 'carousel';
+    interval?: number | string | boolean;
+    mouseEnter?: () => void;
+    mouseExit?: () => void;
+    slide?: boolean;
+    cssModule?: CSSModule
+} & T;
+
+export type UncontrolledProps<T = {}> = React.HTMLProps<HTMLElement> & {
+    items: any[];
+    activeIndex?: number;
+    next?: () => void;
+    previous?: () => void;
+    keyboard?: boolean;
+    pause?: "hover" | false;
+    ride?: "carousel";
+    interval?: number | string | boolean;
+    mouseEnter?: () => void;
+    mouseExit?: () => void;
+    slide?: boolean;
+    cssModule?: CSSModule;
+    controls?: boolean;
+    indicators?: boolean;
+    autoPlay?: boolean;
+} & T;
+
+export type UncontrolledCarouselProps<T = {}> = UncontrolledProps<T>;
+
+declare class Carousel<T = {[key: string]: any}> extends React.Component<CarouselProps<T>> {}
+export default Carousel;
diff --git a/types/reactstrap/v7/lib/CarouselCaption.d.ts b/types/reactstrap/v7/lib/CarouselCaption.d.ts
new file mode 100644
index 0000000000..047505f318
--- /dev/null
+++ b/types/reactstrap/v7/lib/CarouselCaption.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CarouselCaptionProps<T = {}> = React.HTMLProps<HTMLElement> & {
+    captionHeader?: string;
+    captionText: string;
+    cssModule?: CSSModule;
+} & T;
+
+declare class CarouselCaption<T = {[key: string]: any}> extends React.Component<CarouselCaptionProps<T>> {}
+export default CarouselCaption;
diff --git a/types/reactstrap/v7/lib/CarouselControl.d.ts b/types/reactstrap/v7/lib/CarouselControl.d.ts
new file mode 100644
index 0000000000..fb309f4cb1
--- /dev/null
+++ b/types/reactstrap/v7/lib/CarouselControl.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CarouselControlProps<T = {}> = React.HTMLProps<HTMLElement> & {
+    direction: 'prev' | 'next';
+    onClickHandler: () => void;
+    cssModule?: CSSModule;
+    directionText: string;
+} & T;
+
+declare class CarouselControl<T = {[key: string]: any}> extends React.Component<CarouselControlProps<T>> {}
+export default CarouselControl;
diff --git a/types/reactstrap/v7/lib/CarouselIndicators.d.ts b/types/reactstrap/v7/lib/CarouselIndicators.d.ts
new file mode 100644
index 0000000000..761ab8d1cf
--- /dev/null
+++ b/types/reactstrap/v7/lib/CarouselIndicators.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CarouselIndicatorsProps<T = {}> = React.HTMLProps<HTMLElement> & {
+    items: object[];
+    activeIndex: number;
+    cssModule?: CSSModule;
+    onClickHandler: (idx: number) => void;
+} & T;
+
+declare class CarouselIndicators<T = {[key: string]: any}> extends React.Component<CarouselIndicatorsProps<T>> {}
+export default CarouselIndicators;
diff --git a/types/reactstrap/v7/lib/CarouselItem.d.ts b/types/reactstrap/v7/lib/CarouselItem.d.ts
new file mode 100644
index 0000000000..8eb6bb325d
--- /dev/null
+++ b/types/reactstrap/v7/lib/CarouselItem.d.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export interface Transition {
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+}
+
+export type CarouselItemProps<T = {}> = React.HTMLProps<HTMLElement> & Transition & {
+    tag?: React.ReactType;
+    in?: boolean;
+    cssModule?: CSSModule;
+    slide?: boolean;
+} & T;
+
+declare class CarouselItem<T = {[key: string]: any}> extends React.Component<CarouselItemProps<T>> {}
+export default CarouselItem;
diff --git a/types/reactstrap/v7/lib/Col.d.ts b/types/reactstrap/v7/lib/Col.d.ts
new file mode 100644
index 0000000000..c52e32ec62
--- /dev/null
+++ b/types/reactstrap/v7/lib/Col.d.ts
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export type ColumnProps
+  = string
+  | boolean
+  | number
+  | {
+    size?: boolean | number | string
+    push?: string | number
+    pull?: string | number
+    offset?: string | number
+    order?: string | number
+  };
+
+export type ColProps<T = {}> = React.HTMLProps<HTMLDivElement> & {
+  tag?: React.ReactType;
+  xs?: ColumnProps;
+  sm?: ColumnProps;
+  md?: ColumnProps;
+  lg?: ColumnProps;
+  xl?: ColumnProps;
+
+  // custom widths
+  widths?: string[];
+} & T;
+
+declare class Col<T = {[key: string]: any}> extends React.Component<ColProps<T>> {}
+export default Col;
diff --git a/types/reactstrap/v7/lib/Collapse.d.ts b/types/reactstrap/v7/lib/Collapse.d.ts
new file mode 100644
index 0000000000..12247962aa
--- /dev/null
+++ b/types/reactstrap/v7/lib/Collapse.d.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CollapseProps<T = {}> = React.HTMLProps<HTMLElement> & {
+  isOpen?: boolean;
+  classNames?: string;
+  cssModule?: CSSModule;
+  tag?: React.ReactType;
+  navbar?: boolean;
+  delay?: {
+    show: number
+    hide: number
+  };
+  onOpened?: () => void;
+  onClosed?: () => void;
+  onEntering?: () => void;
+  onEntered?: () => void;
+  onExit?: () => void;
+  onExiting?: () => void;
+  onExited?: () => void;
+} & T;
+
+export type UncontrolledProps<T = {}> = React.HTMLProps<HTMLElement> & {
+  isOpen?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  tag?: React.ReactType;
+  navbar?: boolean;
+  toggle?: () => void;
+} & T;
+
+export type UncontrolledCollapseProps<T = {}> = UncontrolledProps<T>;
+
+declare class Collapse<T = {[key: string]: any}> extends React.Component<CollapseProps<T>> {}
+export default Collapse;
diff --git a/types/reactstrap/v7/lib/Container.d.ts b/types/reactstrap/v7/lib/Container.d.ts
new file mode 100644
index 0000000000..a39db466bb
--- /dev/null
+++ b/types/reactstrap/v7/lib/Container.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ContainerProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  fluid?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Container<T = {[key: string]: any}> extends React.Component<ContainerProps<T>> {}
+export default Container;
diff --git a/types/reactstrap/v7/lib/CustomInput.d.ts b/types/reactstrap/v7/lib/CustomInput.d.ts
new file mode 100644
index 0000000000..5d0af9f5c8
--- /dev/null
+++ b/types/reactstrap/v7/lib/CustomInput.d.ts
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type CustomInputType =
+  | 'select'
+  | 'file'
+  | 'radio'
+  | 'checkbox'
+  | 'switch';
+
+export type CustomInputProps<T = {}> = React.InputHTMLAttributes<HTMLInputElement> & {
+  type: CustomInputType;
+  label?: React.ReactNode;
+  inline?: boolean;
+  bsSize?: 'lg' | 'sm';
+  valid?: boolean;
+  invalid?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class CustomInput<T = {[key: string]: any}> extends React.Component<CustomInputProps<T>> {}
+export default CustomInput;
diff --git a/types/reactstrap/v7/lib/Dropdown.d.ts b/types/reactstrap/v7/lib/Dropdown.d.ts
new file mode 100644
index 0000000000..585a1e8693
--- /dev/null
+++ b/types/reactstrap/v7/lib/Dropdown.d.ts
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type Direction =
+  | "up"
+  | "down"
+  | "left"
+  | "right";
+
+export type UncontrolledProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  isOpen?: boolean;
+  toggle?: () => void;
+  className?: string;
+  cssModule?: CSSModule;
+  nav?: boolean;
+  inNavbar?: boolean;
+  setActiveFromChild?: boolean;
+} & T;
+
+export type UncontrolledDropdownProps<T = {}> = UncontrolledProps<T>;
+
+export type Props<T = {}> = UncontrolledProps<T> & {
+  disabled?: boolean;
+  direction?: Direction;
+  group?: boolean;
+  size?: string;
+  tag?: React.ReactType;
+  addonType?: boolean | 'prepend' | 'append';
+};
+
+export type DropdownProps<T = {}> = Props<T>;
+
+declare class Dropdown<T = {[key: string]: any}> extends React.Component<DropdownProps<T>> {}
+export default Dropdown;
diff --git a/types/reactstrap/v7/lib/DropdownItem.d.ts b/types/reactstrap/v7/lib/DropdownItem.d.ts
new file mode 100644
index 0000000000..d6b4344d59
--- /dev/null
+++ b/types/reactstrap/v7/lib/DropdownItem.d.ts
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type DropdownItemProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  disabled?: boolean;
+  divider?: boolean;
+  tag?: React.ReactType;
+  header?: boolean;
+  onClick?: (event: React.MouseEvent<any>) => void;
+  className?: string;
+  cssModule?: CSSModule;
+  href?: string;
+  toggle?: boolean;
+  active?: boolean;
+} & T;
+
+declare class DropdownItem<T> extends React.Component<DropdownItemProps<T>> {}
+export default DropdownItem;
diff --git a/types/reactstrap/v7/lib/DropdownMenu.d.ts b/types/reactstrap/v7/lib/DropdownMenu.d.ts
new file mode 100644
index 0000000000..fedb12f4c3
--- /dev/null
+++ b/types/reactstrap/v7/lib/DropdownMenu.d.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import * as Popper from 'popper.js';
+import { CSSModule } from '../index';
+
+export type DropdownMenuProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  right?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  flip?: boolean;
+  modifiers?: Popper.Modifiers;
+  persist?: boolean;
+} & T;
+
+declare class DropdownMenu<T = {[key: string]: any}> extends React.Component<DropdownMenuProps<T>> {}
+export default DropdownMenu;
diff --git a/types/reactstrap/v7/lib/DropdownToggle.d.ts b/types/reactstrap/v7/lib/DropdownToggle.d.ts
new file mode 100644
index 0000000000..cdb665c6ce
--- /dev/null
+++ b/types/reactstrap/v7/lib/DropdownToggle.d.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type DropdownToggleProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  caret?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<any>;
+  outline?: boolean;
+  'data-toggle'?: string;
+  'aria-haspopup'?: boolean;
+  split?: boolean;
+  tag?: React.ReactType;
+  nav?: boolean;
+  color?: string;
+  size?: string;
+} & T;
+
+declare class DropdownToggle<T> extends React.Component<DropdownToggleProps<T>> {}
+export default DropdownToggle;
diff --git a/types/reactstrap/v7/lib/Fade.d.ts b/types/reactstrap/v7/lib/Fade.d.ts
new file mode 100644
index 0000000000..97fe421e7d
--- /dev/null
+++ b/types/reactstrap/v7/lib/Fade.d.ts
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type FadeProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  in?: boolean;
+  baseClass?: string;
+  baseClassIn?: string;
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+  transitionAppearTimeout?: number;
+  transitionEnterTimeout?: number;
+  transitionLeaveTimeout?: number;
+  transitionAppear?: boolean;
+  transitionEnter?: boolean;
+  transitionLeave?: boolean;
+  onLeave?: () => void;
+  onEnter?: () => void;
+} & T;
+
+declare class Fade<T = {[key: string]: any}> extends React.Component<FadeProps<T>> {}
+export default Fade;
diff --git a/types/reactstrap/v7/lib/Form.d.ts b/types/reactstrap/v7/lib/Form.d.ts
new file mode 100644
index 0000000000..2b6668b631
--- /dev/null
+++ b/types/reactstrap/v7/lib/Form.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type FormProps<T = {}> = React.HTMLProps<HTMLFormElement> & {
+  inline?: boolean;
+  tag?: React.ReactType;
+  innerRef?: React.Ref<HTMLFormElement>;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Form<T> extends React.Component<FormProps<T>> {}
+export default Form;
diff --git a/types/reactstrap/v7/lib/FormFeedback.d.ts b/types/reactstrap/v7/lib/FormFeedback.d.ts
new file mode 100644
index 0000000000..e221c9809b
--- /dev/null
+++ b/types/reactstrap/v7/lib/FormFeedback.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type FormFeedbackProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: string;
+  className?: string;
+  cssModule?: CSSModule;
+  valid?: boolean;
+} & T;
+
+declare class FormFeedback<T = {[key: string]: any}> extends React.Component<FormFeedbackProps<T>> {}
+export default FormFeedback;
diff --git a/types/reactstrap/v7/lib/FormGroup.d.ts b/types/reactstrap/v7/lib/FormGroup.d.ts
new file mode 100644
index 0000000000..f0369ff7d9
--- /dev/null
+++ b/types/reactstrap/v7/lib/FormGroup.d.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type FormGroupProps<T = {}> = React.HTMLProps<HTMLDivElement> & {
+  row?: boolean;
+  check?: boolean;
+  inline?: boolean;
+  disabled?: boolean;
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class FormGroup<T = {[key: string]: any}> extends React.Component<FormGroupProps<T>> {}
+export default FormGroup;
diff --git a/types/reactstrap/v7/lib/FormText.d.ts b/types/reactstrap/v7/lib/FormText.d.ts
new file mode 100644
index 0000000000..f2fc6f30a6
--- /dev/null
+++ b/types/reactstrap/v7/lib/FormText.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type FormTextProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  inline?: boolean;
+  tag?: React.ReactType;
+  color?: string;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class FormText<T = {[key: string]: any}> extends React.Component<FormTextProps<T>> {}
+export default FormText;
diff --git a/types/reactstrap/v7/lib/Input.d.ts b/types/reactstrap/v7/lib/Input.d.ts
new file mode 100644
index 0000000000..87415b7e10
--- /dev/null
+++ b/types/reactstrap/v7/lib/Input.d.ts
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type InputType =
+  | 'text'
+  | 'email'
+  | 'select'
+  | 'file'
+  | 'radio'
+  | 'checkbox'
+  | 'textarea'
+  | 'button'
+  | 'reset'
+  | 'submit'
+  | 'date'
+  | 'datetime-local'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'number'
+  | 'range'
+  | 'search'
+  | 'tel'
+  | 'url'
+  | 'week'
+  | 'password'
+  | 'datetime'
+  | 'time'
+  | 'color';
+
+export type InputProps<T = {}> = React.InputHTMLAttributes<HTMLInputElement> & {
+  type?: InputType;
+  bsSize?: 'lg' | 'sm';
+  state?: string;
+  valid?: boolean;
+  invalid?: boolean;
+  tag?: React.ReactType;
+  innerRef?: React.Ref<HTMLInputElement>;
+  plaintext?: boolean;
+  addon?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Input<T> extends React.Component<InputProps<T>> {}
+export default Input;
diff --git a/types/reactstrap/v7/lib/InputGroup.d.ts b/types/reactstrap/v7/lib/InputGroup.d.ts
new file mode 100644
index 0000000000..e95b6c5539
--- /dev/null
+++ b/types/reactstrap/v7/lib/InputGroup.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type InputGroupProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  size?: string;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class InputGroup<T = {[key: string]: any}> extends React.Component<InputGroupProps<T>> {}
+export default InputGroup;
diff --git a/types/reactstrap/v7/lib/InputGroupAddon.d.ts b/types/reactstrap/v7/lib/InputGroupAddon.d.ts
new file mode 100644
index 0000000000..eec8a6727a
--- /dev/null
+++ b/types/reactstrap/v7/lib/InputGroupAddon.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type InputGroupAddonProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+  addonType: 'prepend' | 'append';
+} & T;
+
+declare class InputGroupAddon<T = {[key: string]: any}> extends React.Component<InputGroupAddonProps<T>> {}
+export default InputGroupAddon;
diff --git a/types/reactstrap/v7/lib/InputGroupButtonDropdown.d.ts b/types/reactstrap/v7/lib/InputGroupButtonDropdown.d.ts
new file mode 100644
index 0000000000..888364df14
--- /dev/null
+++ b/types/reactstrap/v7/lib/InputGroupButtonDropdown.d.ts
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DropdownProps } from './Dropdown';
+
+export type InputGroupButtonDropdownProps<T = {}> = DropdownProps & {
+    addonType: 'prepend' | 'append';
+} & T;
+
+declare class InputGroupButtonDropdown<T = {[key: string]: any}> extends React.Component<InputGroupButtonDropdownProps<T>> {}
+export default InputGroupButtonDropdown;
diff --git a/types/reactstrap/v7/lib/InputGroupText.d.ts b/types/reactstrap/v7/lib/InputGroupText.d.ts
new file mode 100644
index 0000000000..9e352ea9d8
--- /dev/null
+++ b/types/reactstrap/v7/lib/InputGroupText.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type InputGroupTextProps<T = {}> = React.HTMLAttributes<HTMLElement>  & {
+  tag?: React.ReactType;
+  cssModule?: CSSModule;
+} & T;
+
+declare class InputGroupText<T = {[key: string]: any}> extends React.Component<InputGroupTextProps<T>> {}
+export default InputGroupText;
diff --git a/types/reactstrap/v7/lib/Jumbotron.d.ts b/types/reactstrap/v7/lib/Jumbotron.d.ts
new file mode 100644
index 0000000000..d271b63960
--- /dev/null
+++ b/types/reactstrap/v7/lib/Jumbotron.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type JumbotronProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  fluid?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Jumbotron<T = {[key: string]: any}> extends React.Component<JumbotronProps<T>> {}
+export default Jumbotron;
diff --git a/types/reactstrap/v7/lib/Label.d.ts b/types/reactstrap/v7/lib/Label.d.ts
new file mode 100644
index 0000000000..89d9a96e48
--- /dev/null
+++ b/types/reactstrap/v7/lib/Label.d.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+import { ColumnProps } from './Col';
+
+type Intermediate = React.LabelHTMLAttributes<HTMLLabelElement> & {
+  size?: any;
+};
+
+export type LabelProps<T = {}> = Intermediate & {
+  hidden?: boolean;
+  check?: boolean;
+  inline?: boolean;
+  disabled?: boolean;
+  size?: string;
+  for?: string;
+  tag?: string;
+  className?: string;
+  cssModule?: CSSModule;
+  xs?: ColumnProps;
+  sm?: ColumnProps;
+  md?: ColumnProps;
+  lg?: ColumnProps;
+  xl?: ColumnProps;
+} & T;
+
+declare class Label<T = {[key: string]: any}> extends React.Component<LabelProps<T>> {}
+export default Label;
diff --git a/types/reactstrap/v7/lib/ListGroup.d.ts b/types/reactstrap/v7/lib/ListGroup.d.ts
new file mode 100644
index 0000000000..1c2f6739e6
--- /dev/null
+++ b/types/reactstrap/v7/lib/ListGroup.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ListGroupProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  flush?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class ListGroup<T = {[key: string]: any}> extends React.Component<ListGroupProps<T>> {}
+export default ListGroup;
diff --git a/types/reactstrap/v7/lib/ListGroupItem.d.ts b/types/reactstrap/v7/lib/ListGroupItem.d.ts
new file mode 100644
index 0000000000..54ae820290
--- /dev/null
+++ b/types/reactstrap/v7/lib/ListGroupItem.d.ts
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ListGroupItemProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  active?: boolean;
+  disabled?: boolean;
+  color?: string;
+  action?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  href?: string;
+
+  onClick?: React.MouseEventHandler<any>;
+} & T;
+
+declare class ListGroupItem<T = {[key: string]: any}> extends React.Component<ListGroupItemProps<T>> {}
+export default ListGroupItem;
diff --git a/types/reactstrap/v7/lib/ListGroupItemHeading.d.ts b/types/reactstrap/v7/lib/ListGroupItemHeading.d.ts
new file mode 100644
index 0000000000..6748aaa04c
--- /dev/null
+++ b/types/reactstrap/v7/lib/ListGroupItemHeading.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ListGroupItemHeadingProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class ListGroupItemHeading<T = {[key: string]: any}> extends React.Component<ListGroupItemHeadingProps<T>> {}
+export default ListGroupItemHeading;
diff --git a/types/reactstrap/v7/lib/ListGroupItemText.d.ts b/types/reactstrap/v7/lib/ListGroupItemText.d.ts
new file mode 100644
index 0000000000..667f2cad70
--- /dev/null
+++ b/types/reactstrap/v7/lib/ListGroupItemText.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ListGroupItemTextProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class ListGroupItemText<T = {[key: string]: any}> extends React.Component<ListGroupItemTextProps<T>> {}
+export default ListGroupItemText;
diff --git a/types/reactstrap/v7/lib/Media.d.ts b/types/reactstrap/v7/lib/Media.d.ts
new file mode 100644
index 0000000000..971df9c22a
--- /dev/null
+++ b/types/reactstrap/v7/lib/Media.d.ts
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type MediaProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  body?: boolean;
+  bottom?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  heading?: boolean;
+  left?: boolean;
+  list?: boolean;
+  middle?: boolean;
+  object?: boolean;
+  right?: boolean;
+  tag?: React.ReactType;
+  top?: boolean;
+  src?: string;
+  href?: string;
+  alt?: string;
+} & T;
+
+declare class Media<T = {[key: string]: any}> extends React.Component<MediaProps<T>> {}
+export default Media;
diff --git a/types/reactstrap/v7/lib/Modal.d.ts b/types/reactstrap/v7/lib/Modal.d.ts
new file mode 100644
index 0000000000..f2761bbc91
--- /dev/null
+++ b/types/reactstrap/v7/lib/Modal.d.ts
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+import { FadeProps } from './Fade';
+
+export type ModalProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  isOpen?: boolean;
+  autoFocus?: boolean;
+  size?: string;
+  toggle?: () => void;
+  keyboard?: boolean;
+  backdrop?: boolean | 'static';
+  onEnter?: () => void;
+  onExit?: () => void;
+  onOpened?: () => void;
+  onClosed?: () => void;
+  className?: string;
+  cssModule?: CSSModule;
+  wrapClassName?: string;
+  modalClassName?: string;
+  backdropClassName?: string;
+  contentClassName?: string;
+  zIndex?: number | string;
+  fade?: boolean;
+  backdropTransition?: FadeProps;
+  modalTransition?: FadeProps;
+  centered?: boolean;
+  external?: React.ReactNode;
+  labelledBy?: string;
+  role?: string;
+} & T;
+
+declare class Modal<T> extends React.Component<ModalProps<T>> {}
+export default Modal;
diff --git a/types/reactstrap/v7/lib/ModalBody.d.ts b/types/reactstrap/v7/lib/ModalBody.d.ts
new file mode 100644
index 0000000000..a7c38a1914
--- /dev/null
+++ b/types/reactstrap/v7/lib/ModalBody.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ModalBodyProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class ModalBody<T = {[key: string]: any}> extends React.Component<ModalBodyProps<T>> {}
+export default ModalBody;
diff --git a/types/reactstrap/v7/lib/ModalFooter.d.ts b/types/reactstrap/v7/lib/ModalFooter.d.ts
new file mode 100644
index 0000000000..8ce9b23cf2
--- /dev/null
+++ b/types/reactstrap/v7/lib/ModalFooter.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ModalFooterProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class ModalFooter<T = {[key: string]: any}> extends React.Component<ModalFooterProps<T>> {}
+export default ModalFooter;
diff --git a/types/reactstrap/v7/lib/ModalHeader.d.ts b/types/reactstrap/v7/lib/ModalHeader.d.ts
new file mode 100644
index 0000000000..4ef33e16ad
--- /dev/null
+++ b/types/reactstrap/v7/lib/ModalHeader.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ModalHeaderProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+  wrapTag?: React.ReactType;
+  toggle?: () => void;
+} & T;
+
+declare class ModalHeader<T = {[key: string]: any}> extends React.Component<ModalHeaderProps<T>> {}
+export default ModalHeader;
diff --git a/types/reactstrap/v7/lib/Nav.d.ts b/types/reactstrap/v7/lib/Nav.d.ts
new file mode 100644
index 0000000000..bc5fbdb6b9
--- /dev/null
+++ b/types/reactstrap/v7/lib/Nav.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type NavProps<T = {}> = React.HTMLProps<HTMLUListElement> & {
+  tabs?: boolean;
+  pills?: boolean;
+  vertical?: boolean | string;
+  horizontal?: string;
+  justified?: boolean;
+  fill?: boolean;
+  navbar?: boolean;
+  card?: boolean;
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Nav<T = {[key: string]: any}> extends React.Component<NavProps<T>> {}
+export default Nav;
diff --git a/types/reactstrap/v7/lib/NavItem.d.ts b/types/reactstrap/v7/lib/NavItem.d.ts
new file mode 100644
index 0000000000..ff2ad879c3
--- /dev/null
+++ b/types/reactstrap/v7/lib/NavItem.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type NavItemProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  active?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class NavItem<T = {[key: string]: any}> extends React.Component<NavItemProps<T>> {}
+export default NavItem;
diff --git a/types/reactstrap/v7/lib/NavLink.d.ts b/types/reactstrap/v7/lib/NavLink.d.ts
new file mode 100644
index 0000000000..4e88666c22
--- /dev/null
+++ b/types/reactstrap/v7/lib/NavLink.d.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type NavLinkProps<T = {}> = React.HTMLProps<HTMLAnchorElement> & {
+  tag?: React.ReactType;
+  innerRef?: React.Ref<HTMLAnchorElement>;
+  disabled?: boolean;
+  active?: boolean;
+  className?: string;
+  cssModule?: CSSModule;
+  onClick?: React.MouseEventHandler<any>;
+  href?: string;
+} & T;
+
+declare class NavLink<T> extends React.Component<NavLinkProps<T>> {}
+export default NavLink;
diff --git a/types/reactstrap/v7/lib/Navbar.d.ts b/types/reactstrap/v7/lib/Navbar.d.ts
new file mode 100644
index 0000000000..a0f721835a
--- /dev/null
+++ b/types/reactstrap/v7/lib/Navbar.d.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type NavbarProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  light?: boolean;
+  dark?: boolean;
+  inverse?: boolean;
+  full?: boolean;
+  fixed?: string;
+  sticky?: string;
+  color?: string;
+  role?: string;
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+  toggleable?: boolean | string;
+  expand?: boolean | string;
+} & T;
+
+declare class Navbar<T = {[key: string]: any}> extends React.Component<NavbarProps<T>> {}
+export default Navbar;
diff --git a/types/reactstrap/v7/lib/NavbarBrand.d.ts b/types/reactstrap/v7/lib/NavbarBrand.d.ts
new file mode 100644
index 0000000000..eea7ba15e4
--- /dev/null
+++ b/types/reactstrap/v7/lib/NavbarBrand.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type NavbarBrandProps<T = {}> = React.HTMLProps<HTMLAnchorElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class NavbarBrand<T = {[key: string]: any}> extends React.Component<NavbarBrandProps<T>> {}
+export default NavbarBrand;
diff --git a/types/reactstrap/v7/lib/NavbarToggler.d.ts b/types/reactstrap/v7/lib/NavbarToggler.d.ts
new file mode 100644
index 0000000000..f4e1e212e5
--- /dev/null
+++ b/types/reactstrap/v7/lib/NavbarToggler.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type NavbarTogglerProps<T = {}> = React.HTMLProps<HTMLAnchorElement> & {
+  tag?: React.ReactType;
+  type?: string;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class NavbarToggler<T = {[key: string]: any}> extends React.Component<NavbarTogglerProps<T>> {}
+export default NavbarToggler;
diff --git a/types/reactstrap/v7/lib/Pagination.d.ts b/types/reactstrap/v7/lib/Pagination.d.ts
new file mode 100644
index 0000000000..d31895d31d
--- /dev/null
+++ b/types/reactstrap/v7/lib/Pagination.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type PaginationProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  className?: string;
+  cssModule?: CSSModule;
+  size?: string;
+} & T;
+
+declare class Pagination<T = {[key: string]: any}> extends React.Component<PaginationProps<T>> {}
+export default Pagination;
diff --git a/types/reactstrap/v7/lib/PaginationItem.d.ts b/types/reactstrap/v7/lib/PaginationItem.d.ts
new file mode 100644
index 0000000000..b2567f5402
--- /dev/null
+++ b/types/reactstrap/v7/lib/PaginationItem.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type PaginationItemProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  className?: string;
+  cssModule?: CSSModule;
+  active?: boolean;
+  disabled?: boolean;
+  tag?: React.ReactType;
+} & T;
+
+declare class PaginationItem<T = {[key: string]: any}> extends React.Component<PaginationItemProps<T>> {}
+export default PaginationItem;
diff --git a/types/reactstrap/v7/lib/PaginationLink.d.ts b/types/reactstrap/v7/lib/PaginationLink.d.ts
new file mode 100644
index 0000000000..5e1db2d2b7
--- /dev/null
+++ b/types/reactstrap/v7/lib/PaginationLink.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type PaginationLinkProps<T = {}> = React.HTMLProps<HTMLAnchorElement> & {
+  'aria-label'?: string;
+  className?: string;
+  cssModule?: CSSModule;
+  next?: boolean;
+  previous?: boolean;
+  tag?: React.ReactType;
+} & T;
+
+declare class PaginationLink<T = {[key: string]: any}> extends React.Component<PaginationLinkProps<T>> {}
+export default PaginationLink;
diff --git a/types/reactstrap/v7/lib/Popover.d.ts b/types/reactstrap/v7/lib/Popover.d.ts
new file mode 100644
index 0000000000..8677fe69fa
--- /dev/null
+++ b/types/reactstrap/v7/lib/Popover.d.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as Popper from 'popper.js';
+import { CSSModule } from '../index';
+
+export type PopoverProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  isOpen?: boolean;
+  toggle?: () => void;
+  target: string | HTMLElement;
+  container?: string | HTMLElement;
+  boundariesElement?: Popper.Boundary | Element;
+  className?: string;
+  placement?: Popper.Placement;
+  innerClassName?: string;
+  disabled?: boolean;
+  hideArrow?: boolean;
+  placementPrefix?: string;
+  delay?: number | {show: number, hide: number};
+  modifiers?: Popper.Modifiers;
+  cssModule?: CSSModule;
+} & T;
+
+export type UncontrolledPopoverProps<T = {}> = PopoverProps<T> & {
+    defaultOpen?: boolean;
+};
+
+declare class Popover<T> extends React.Component<PopoverProps<T>> {}
+export default Popover;
diff --git a/types/reactstrap/v7/lib/PopoverBody.d.ts b/types/reactstrap/v7/lib/PopoverBody.d.ts
new file mode 100644
index 0000000000..ef274a0558
--- /dev/null
+++ b/types/reactstrap/v7/lib/PopoverBody.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type PopoverBodyProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class PopoverBody<T = {[key: string]: any}> extends React.Component<PopoverBodyProps<T>> {}
+export default PopoverBody;
diff --git a/types/reactstrap/v7/lib/PopoverHeader.d.ts b/types/reactstrap/v7/lib/PopoverHeader.d.ts
new file mode 100644
index 0000000000..2ee7d5665e
--- /dev/null
+++ b/types/reactstrap/v7/lib/PopoverHeader.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type PopoverHeaderProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class PopoverHeader<T = {[key: string]: any}> extends React.Component<PopoverHeaderProps<T>> {}
+export default PopoverHeader;
diff --git a/types/reactstrap/v7/lib/Progress.d.ts b/types/reactstrap/v7/lib/Progress.d.ts
new file mode 100644
index 0000000000..3a6b8178fa
--- /dev/null
+++ b/types/reactstrap/v7/lib/Progress.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type ProgressProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  bar?: boolean;
+  multi?: boolean;
+  tag?: string;
+  value?: string | number;
+  max?: string | number;
+  animated?: boolean;
+  striped?: boolean;
+  color?: string;
+  className?: string;
+  cssModule?: CSSModule;
+  barClassName?: string;
+} & T;
+
+declare class Progress<T = {[key: string]: any}> extends React.Component<ProgressProps<T>> {}
+export default Progress;
diff --git a/types/reactstrap/v7/lib/Row.d.ts b/types/reactstrap/v7/lib/Row.d.ts
new file mode 100644
index 0000000000..c8887e3e12
--- /dev/null
+++ b/types/reactstrap/v7/lib/Row.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type RowProps<T = {}> = React.HTMLProps<HTMLElement> & {
+  className?: string;
+  cssModule?: CSSModule;
+  tag?: React.ReactType;
+  noGutters?: boolean;
+} & T;
+
+declare class Row<T = {[key: string]: any}> extends React.Component<RowProps<T>> {}
+export default Row;
diff --git a/types/reactstrap/v7/lib/Spinner.d.ts b/types/reactstrap/v7/lib/Spinner.d.ts
new file mode 100644
index 0000000000..3f60d0d77d
--- /dev/null
+++ b/types/reactstrap/v7/lib/Spinner.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type SpinnerProps<T = {}> = React.HTMLProps<HTMLElement> & {
+  tag?: React.ReactType;
+  type?: string;
+  size?: any;
+  color?: string;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Spinner<T = {[key: string]: any}> extends React.Component<SpinnerProps<T>> {}
+export default Spinner;
diff --git a/types/reactstrap/v7/lib/TabContent.d.ts b/types/reactstrap/v7/lib/TabContent.d.ts
new file mode 100644
index 0000000000..6597484f9e
--- /dev/null
+++ b/types/reactstrap/v7/lib/TabContent.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type TabContentProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  activeTab?: number | string;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class TabContent<T> extends React.Component<TabContentProps<T>> {}
+export default TabContent;
diff --git a/types/reactstrap/v7/lib/TabPane.d.ts b/types/reactstrap/v7/lib/TabPane.d.ts
new file mode 100644
index 0000000000..7f4624e23a
--- /dev/null
+++ b/types/reactstrap/v7/lib/TabPane.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type TabPaneProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+  tabId?: number | string;
+} & T;
+
+declare class TabPane<T = {[key: string]: any}> extends React.Component<TabPaneProps<T>> {}
+export default TabPane;
diff --git a/types/reactstrap/v7/lib/Table.d.ts b/types/reactstrap/v7/lib/Table.d.ts
new file mode 100644
index 0000000000..8e59b6a13e
--- /dev/null
+++ b/types/reactstrap/v7/lib/Table.d.ts
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type TableProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  className?: string;
+  cssModule?: CSSModule;
+  size?: string;
+  bordered?: boolean;
+  borderless?: boolean;
+  striped?: boolean;
+  inverse?: boolean;
+  hover?: boolean;
+  reflow?: boolean;
+  responsive?: boolean;
+  tag?: React.ReactType;
+  responsiveTag?: React.ReactType;
+} & T;
+
+declare class Table<T = {[key: string]: any}> extends React.Component<TableProps<T>> {}
+export default Table;
diff --git a/types/reactstrap/v7/lib/Tag.d.ts b/types/reactstrap/v7/lib/Tag.d.ts
new file mode 100644
index 0000000000..dbec4c3516
--- /dev/null
+++ b/types/reactstrap/v7/lib/Tag.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export type TagProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  color?: string;
+  pill?: boolean;
+  tag?: React.ReactType;
+  className?: string;
+  cssModule?: CSSModule;
+} & T;
+
+declare class Tag<T = {[key: string]: any}> extends React.Component<TagProps<T>> {}
+export default Tag;
diff --git a/types/reactstrap/v7/lib/Tooltip.d.ts b/types/reactstrap/v7/lib/Tooltip.d.ts
new file mode 100644
index 0000000000..5ec05fa72f
--- /dev/null
+++ b/types/reactstrap/v7/lib/Tooltip.d.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as Popper from 'popper.js';
+import { CSSModule } from '../index';
+
+export type UncontrolledProps<T = {}> = React.HTMLAttributes<HTMLElement> & {
+  target: string | HTMLElement;
+  container?: string | HTMLElement;
+  delay?: number | {show: number, hide: number};
+  className?: string;
+  innerClassName?: string;
+  autohide?: boolean;
+  placement?: Popper.Placement;
+  modifiers?: Popper.Modifiers;
+  cssModule?: CSSModule;
+} & T;
+export type UncontrolledTooltipProps<T = {}> = UncontrolledProps<T>;
+
+export type TooltipProps<T = {}> = UncontrolledTooltipProps<T> & {
+  toggle?: () => void;
+  isOpen?: boolean;
+};
+
+declare class Tooltip<T> extends React.Component<TooltipProps<T>> {}
+export default Tooltip;
diff --git a/types/reactstrap/v7/lib/Uncontrolled.d.ts b/types/reactstrap/v7/lib/Uncontrolled.d.ts
new file mode 100644
index 0000000000..f20db2f896
--- /dev/null
+++ b/types/reactstrap/v7/lib/Uncontrolled.d.ts
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { UncontrolledAlertProps          } from './Alert';
+import { UncontrolledButtonDropdownProps } from './ButtonDropdown';
+import { UncontrolledDropdownProps       } from './Dropdown';
+import { UncontrolledTooltipProps        } from './Tooltip';
+import { UncontrolledCollapseProps       } from './Collapse';
+import { UncontrolledCarouselProps       } from './Carousel';
+import { UncontrolledPopoverProps        } from './Popover';
+
+export class UncontrolledAlert<T = {}> extends React.Component<UncontrolledAlertProps<T>> {}
+export class UncontrolledButtonDropdown<T = {}> extends React.Component<UncontrolledButtonDropdownProps<T>> {}
+export class UncontrolledDropdown<T = {}> extends React.Component<UncontrolledDropdownProps<T>> {}
+export class UncontrolledTooltip<T = {}> extends React.Component<UncontrolledTooltipProps<T>> {}
+export class UncontrolledCollapse<T = {}> extends React.Component<UncontrolledCollapseProps<T>> {}
+export class UncontrolledCarousel<T = {}> extends React.Component<UncontrolledCarouselProps<T>> {}
+export class UncontrolledPopover<T = {}> extends React.Component<UncontrolledPopoverProps<T>> {}
+
+export { UncontrolledAlertProps          } from './Alert';
+export { UncontrolledButtonDropdownProps } from './ButtonDropdown';
+export { UncontrolledDropdownProps       } from './Dropdown';
+export { UncontrolledTooltipProps        } from './Tooltip';
+export { UncontrolledCollapseProps       } from './Collapse';
+export { UncontrolledCarouselProps       } from './Carousel';
+export { UncontrolledPopoverProps        } from './Popover';
diff --git a/types/reactstrap/v7/reactstrap-tests.tsx b/types/reactstrap/v7/reactstrap-tests.tsx
new file mode 100644
index 0000000000..67c24bce28
--- /dev/null
+++ b/types/reactstrap/v7/reactstrap-tests.tsx
@@ -0,0 +1,4359 @@
+import * as React from 'react';
+import {
+  Alert,
+  UncontrolledAlert,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonDropdown,
+  ButtonGroup,
+  ButtonToolbar,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+  Card,
+  CardBody,
+  CardColumns,
+  CardDeck,
+  CardFooter,
+  CardGroup,
+  CardHeader,
+  CardImg,
+  CardImgOverlay,
+  CardLink,
+  CardSubtitle,
+  CardText,
+  CardTitle,
+  Carousel,
+  CarouselCaption,
+  CarouselControl,
+  CarouselItem,
+  CarouselIndicators,
+  Row,
+  Col,
+  Container,
+  Collapse,
+  CustomInput,
+  Fade,
+  Form,
+  FormFeedback,
+  FormGroup,
+  FormText,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButtonDropdown,
+  InputGroupText,
+  Pagination,
+  Label,
+  ListGroup,
+  ListGroupItem,
+  ListGroupItemHeading,
+  ListGroupItemText,
+  ModalFooter,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  Jumbotron,
+  Media,
+  Nav,
+  Navbar,
+  NavbarBrand,
+  NavbarToggler,
+  NavItem,
+  NavLink,
+  PaginationItem,
+  PaginationLink,
+  Popover,
+  PopoverBody,
+  PopoverHeader,
+  Progress,
+  TabPane,
+  UncontrolledButtonDropdown,
+  UncontrolledDropdown,
+  UncontrolledTooltip,
+  UncontrolledCollapse,
+  UncontrolledCarousel,
+  TabContent,
+  Table,
+  Tag,
+  Tooltip,
+  Spinner,
+  UncontrolledPopover,
+} from 'reactstrap';
+
+// --------------- Alert
+const Examplea = (props: any) => {
+  return (
+    <div>
+      <Alert color="success">
+        <strong>Well done!</strong> You successfully read this important alert message.
+      </Alert>
+      <Alert color="info">
+        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
+      </Alert>
+      <Alert color="warning">
+        <strong>Warning!</strong> Better check yourself, you're not looking too good.
+      </Alert>
+      <Alert color="danger">
+        <strong>Oh snap!</strong> Change a few things up and try submitting again.
+      </Alert>
+    </div>
+  );
+};
+
+class AlertExample extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      visible: true
+    };
+  }
+
+  onDismiss = () => {
+    this.setState({ visible: false });
+  }
+
+  render() {
+    return (
+      <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
+        I am an alert and I can be dismissed!
+      </Alert>
+    );
+  }
+}
+
+function AlertExample1() {
+  return (
+    <UncontrolledAlert color="info">
+      I am an alert and I can be dismissed!
+    </UncontrolledAlert>
+  );
+}
+
+// --------------- Badge
+class Example2 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Heading <Badge>New</Badge></h1>
+        <h2>Heading <Badge>New</Badge></h2>
+        <h3>Heading <Badge>New</Badge></h3>
+        <h4>Heading <Badge>New</Badge></h4>
+        <h5>Heading <Badge>New</Badge></h5>
+        <h6>Heading <Badge>New</Badge></h6>
+      </div>
+    );
+  }
+}
+
+export class Example3 extends React.Component {
+  render() {
+    return (
+      <div>
+        <Badge>default</Badge>
+        <Badge color="primary">primary</Badge>
+        <Badge color="success">success</Badge>
+        <Badge color="info">info</Badge>
+        <Badge color="warning">warning</Badge>
+        <Badge color="danger">danger</Badge>
+      </div>
+    );
+  }
+}
+
+class Example4 extends React.Component {
+  render() {
+    return (
+      <div>
+        <Badge color="default" pill>default</Badge>{' '}
+        <Badge color="primary" pill>primary</Badge>{' '}
+        <Badge color="success" pill>success</Badge>{' '}
+        <Badge color="info" pill>info</Badge>{' '}
+        <Badge color="warning" pill>warning</Badge>{' '}
+        <Badge color="danger" pill>danger</Badge>
+      </div>
+    );
+  }
+}
+
+// ------------- Breadcrumbs
+const Example5 = (props: any) => {
+  return (
+    <div>
+      <Breadcrumb>
+        <BreadcrumbItem active>Home</BreadcrumbItem>
+      </Breadcrumb>
+      <Breadcrumb>
+        <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
+        <BreadcrumbItem active>Library</BreadcrumbItem>
+      </Breadcrumb>
+      <Breadcrumb>
+        <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
+        <BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
+        <BreadcrumbItem active>Data</BreadcrumbItem>
+      </Breadcrumb>
+    </div>
+  );
+};
+
+const Example6 = (props: any) => {
+  return (
+    <div>
+      <Breadcrumb tag="nav">
+        <BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
+        <BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
+        <BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
+        <BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
+      </Breadcrumb>
+    </div>
+  );
+};
+
+// ------------- Buttons
+class Example7 extends React.Component {
+  render() {
+    return (
+      <div>
+        <Button color="primary">primary</Button>{' '}
+        <Button color="secondary">secondary</Button>{' '}
+        <Button color="success">success</Button>{' '}
+        <Button color="info">info</Button>{' '}
+        <Button color="warning">warning</Button>{' '}
+        <Button color="danger">danger</Button>{' '}
+        <Button color="link">link</Button>
+      </div>
+    );
+  }
+}
+
+class Example8 extends React.Component {
+  render() {
+    return (
+      <div>
+        <Button outline color="primary">primary</Button>{' '}
+        <Button outline color="secondary">secondary</Button>{' '}
+        <Button outline color="success">success</Button>{' '}
+        <Button outline color="info">info</Button>{' '}
+        <Button outline color="warning">warning</Button>{' '}
+        <Button outline color="danger">danger</Button>
+      </div>
+    );
+  }
+}
+
+const Example9 = (
+  <div>
+    <Button color="primary" size="lg">Large Button</Button>{' '}
+    <Button color="secondary" size="lg">Large Button</Button>
+  </div>
+);
+
+const Example10 = (
+  <div>
+    <Button color="primary" size="sm">Small Button</Button>{' '}
+    <Button color="secondary" size="sm">Small Button</Button>
+  </div>
+);
+
+const Example11 = (
+  <div>
+    <Button color="primary" size="lg" block>Block level button</Button>
+    <Button color="secondary" size="lg" block>Block level button</Button>
+  </div>
+);
+
+const Example12 = (
+  <div>
+    <Button color="primary" size="lg" active>Primary link</Button>{' '}
+    <Button color="secondary" size="lg" active>Link</Button>
+  </div>
+);
+
+const Example13 = (
+  <div>
+    <Button color="primary" size="lg" disabled>Primary button</Button>{' '}
+    <Button color="secondary" size="lg" disabled>Button</Button>
+  </div>
+);
+
+interface CustomButtonProps extends ButtonProps {
+  customProp: string;
+}
+// NOTE: not adding the <{}> causes the generic parameter to be a spread type of CustomButtonProps,
+// for some reason this causes children to be inferred as being 'ReactNode & {}' which makes the spread
+// invalid. TS3.2 bug?
+const CustomButton: React.SFC<CustomButtonProps> = props => <Button<{}> {...props}/>;
+
+class Example14 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.state = { cSelected: [] };
+
+    this.onRadioBtnClick = this.onRadioBtnClick.bind(this);
+    this.onCheckboxBtnClick = this.onCheckboxBtnClick.bind(this);
+  }
+
+  onRadioBtnClick(rSelected: number) {
+    this.setState({ rSelected });
+  }
+
+  onCheckboxBtnClick(selected: number) {
+    const index = this.state.cSelected.indexOf(selected);
+    if (index < 0) {
+      this.state.cSelected.push(selected);
+    } else {
+      this.state.cSelected.splice(index, 1);
+    }
+    this.setState({ cSelected: [...this.state.cSelected] });
+  }
+
+  render() {
+    return (
+      <div>
+        <h5>Radio Buttons</h5>
+        <ButtonGroup>
+          <Button color="primary" onClick={() => this.onRadioBtnClick(1)} active={this.state.rSelected === 1}>One</Button>
+          <Button color="primary" onClick={() => this.onRadioBtnClick(2)} active={this.state.rSelected === 2}>Two</Button>
+          <Button color="primary" onClick={() => this.onRadioBtnClick(3)} active={this.state.rSelected === 3}>Three</Button>
+        </ButtonGroup>
+        <p>Selected: {this.state.rSelected}</p>
+
+        <h5>Checkbox Buttons</h5>
+        <ButtonGroup>
+          <Button color="primary" onClick={() => this.onCheckboxBtnClick(1)} active={this.state.cSelected.includes(1)}>One</Button>
+          <Button color="primary" onClick={() => this.onCheckboxBtnClick(2)} active={this.state.cSelected.includes(2)}>Two</Button>
+          <Button color="primary" onClick={() => this.onCheckboxBtnClick(3)} active={this.state.cSelected.includes(3)}>Three</Button>
+        </ButtonGroup>
+        <p>Selected: {JSON.stringify(this.state.cSelected)}</p>
+      </div>
+    );
+  }
+}
+
+// ------------- Button Dropdown
+class Example15 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+        <DropdownToggle caret>
+          Button Dropdown
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem header>Header</DropdownItem>
+          <DropdownItem disabled>Action</DropdownItem>
+          <DropdownItem>Another Action</DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem onClick={(event: React.MouseEvent<HTMLElement>) => {
+            // something happens here
+          }}>Another Action</DropdownItem>
+        </DropdownMenu>
+      </ButtonDropdown>
+    );
+  }
+}
+
+const Example16 = (
+  <ButtonDropdown isOpen={true} toggle={() => true}>
+    <DropdownToggle caret color="primary">
+      Text
+  </DropdownToggle>
+    <DropdownMenu>
+      <DropdownItem header>Header</DropdownItem>
+      <DropdownItem disabled>Action</DropdownItem>
+      <DropdownItem>Another Action</DropdownItem>
+      <DropdownItem divider />
+      <DropdownItem>Another Action</DropdownItem>
+    </DropdownMenu>
+  </ButtonDropdown>
+);
+
+const Example17 = (props: any) => (
+  <ButtonDropdown isOpen={true} toggle={() => true}>
+    <Button id="caret" color="primary">{props.text}</Button>
+    <DropdownToggle caret color="primary" />
+    <DropdownMenu>
+      <DropdownItem header>Header</DropdownItem>
+      <DropdownItem disabled>Action</DropdownItem>
+      <DropdownItem>Another Action</DropdownItem>
+      <DropdownItem divider />
+      <DropdownItem>Another Action</DropdownItem>
+    </DropdownMenu>
+  </ButtonDropdown>
+);
+
+const Example18 = (
+  <div>
+    <ButtonDropdown isOpen={true} toggle={() => true}>
+      <DropdownToggle caret size="lg">
+        Large Button
+    </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem>Another Action</DropdownItem>
+        <DropdownItem>Another Action</DropdownItem>
+      </DropdownMenu>
+    </ButtonDropdown>
+
+    <ButtonDropdown isOpen={true} toggle={() => true}>
+      <DropdownToggle caret size="sm">
+        Small Button
+    </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem>Another Action</DropdownItem>
+        <DropdownItem>Another Action</DropdownItem>
+      </DropdownMenu>
+    </ButtonDropdown>
+  </div>
+);
+
+const Example19 = (
+  <ButtonDropdown isOpen={true} toggle={() => true} direction="up">
+    <DropdownToggle caret size="lg">
+      Dropup
+    </DropdownToggle>
+    <DropdownMenu>
+      <DropdownItem>Another Action</DropdownItem>
+      <DropdownItem>Another Action</DropdownItem>
+    </DropdownMenu>
+  </ButtonDropdown>
+);
+
+// --------------- ButtonGroup
+class Example20 extends React.Component {
+  render() {
+    return (
+      <ButtonGroup>
+        <Button>Left</Button>{' '}
+        <Button>Middle</Button>{' '}
+        <Button>Right</Button>
+      </ButtonGroup>
+    );
+  }
+}
+
+class Example21 extends React.Component {
+  render() {
+    return (
+      <ButtonToolbar>
+        <ButtonGroup>
+          <Button>1</Button>
+          <Button>2</Button>
+          <Button>3</Button>
+          <Button>4</Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button>5</Button>
+          <Button>6</Button>
+          <Button>7</Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button>8</Button>
+        </ButtonGroup>
+      </ButtonToolbar>
+    );
+  }
+}
+
+const Example22 = (props: any) => (
+  <div>
+    <ButtonGroup size="lg">
+      <Button>Left</Button>
+      <Button>Middle</Button>
+      <Button>Right</Button>
+    </ButtonGroup>
+
+    <ButtonGroup>
+      <Button>Left</Button>
+      <Button>Middle</Button>
+      <Button>Right</Button>
+    </ButtonGroup>
+
+    <ButtonGroup size="sm">
+      <Button>Left</Button>
+      <Button>Middle</Button>
+      <Button>Right</Button>
+    </ButtonGroup>
+  </div>
+);
+
+const Example23 = (props: any) => (
+  <ButtonGroup>
+    <Button>1</Button>
+    <Button>2</Button>
+    <ButtonDropdown isOpen={true} toggle={() => true}>
+      <DropdownToggle caret>
+        Dropdown
+    </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem>Dropdown Link</DropdownItem>
+        <DropdownItem>Dropdown Link</DropdownItem>
+      </DropdownMenu>
+    </ButtonDropdown>
+  </ButtonGroup>
+);
+
+const Example24 = (props: any) => (
+  <ButtonGroup vertical>
+    <Button>1</Button>
+    <Button>2</Button>
+    <ButtonDropdown isOpen={props.dropdownOpen} toggle={() => true}>
+      <DropdownToggle caret>
+        Dropdown
+    </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem>Dropdown Link</DropdownItem>
+        <DropdownItem>Dropdown Link</DropdownItem>
+      </DropdownMenu>
+    </ButtonDropdown>
+  </ButtonGroup>
+);
+
+// ------------------ Cards
+const Example25 = (props: any) => {
+  return (
+    <div>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+const Example26 = (props: any) => {
+  return (
+    <div>
+      <Card>
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+        </CardBody>
+        <img width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
+          <CardLink href="#">Card Link</CardLink>
+          <CardLink href="#">Another Link</CardLink>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+const Example27 = (props: any) => {
+  return (
+    <Row noGutters>
+      <Col sm="6">
+        <Card block>
+          <CardTitle>Special Title Treatment</CardTitle>
+          <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+          <Button>Go somewhere</Button>
+        </Card>
+      </Col>
+      <Col sm="6">
+        <Card block>
+          <CardTitle>Special Title Treatment</CardTitle>
+          <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+          <Button>Go somewhere</Button>
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+
+const Example28 = (props: any) => {
+  return (
+    <div>
+      <Card block>
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button>Go somewhere</Button>
+      </Card>
+      <Card block className="text-center">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button>Go somewhere</Button>
+      </Card>
+      <Card block className="text-right">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button>Go somewhere</Button>
+      </Card>
+    </div>
+  );
+};
+
+const Example29 = (props: any) => {
+  return (
+    <div>
+      <Card>
+        <CardHeader>Header</CardHeader>
+        <CardBody>
+          <CardTitle>Special Title Treatment</CardTitle>
+          <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+          <Button>Go somewhere</Button>
+        </CardBody>
+        <CardFooter>Footer</CardFooter>
+      </Card>
+
+      <Card>
+        <CardHeader tag="h3">Featured</CardHeader>
+        <CardBody>
+          <CardTitle>Special Title Treatment</CardTitle>
+          <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+          <Button>Go somewhere</Button>
+        </CardBody>
+        <CardFooter className="text-muted">Footer</CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+const Example30 = (props: any) => {
+  return (
+    <div>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card Title</CardTitle>
+          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+          <CardText>
+            <small className="text-muted">Last updated 3 mins ago</small>
+          </CardText>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardBody>
+          <CardTitle>Card Title</CardTitle>
+          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+          <CardText>
+            <small className="text-muted">Last updated 3 mins ago</small>
+          </CardText>
+        </CardBody>
+        <CardImg bottom width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
+      </Card>
+    </div>
+  );
+};
+
+const Example31 = (props: any) => {
+  return (
+    <div>
+      <Card inverse>
+        <CardImg width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97270&w=318&h=270&bg=333333&txtclr=666666" alt="Card image cap" />
+        <CardImgOverlay>
+          <CardTitle>Card Title</CardTitle>
+          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+          <CardText>
+            <small className="text-muted">Last updated 3 mins ago</small>
+          </CardText>
+        </CardImgOverlay>
+      </Card>
+    </div>
+  );
+};
+
+const Example32 = (props: any) => {
+  return (
+    <div>
+      <Card block inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button>Button</Button>
+      </Card>
+      <Card block inverse color="primary">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+      <Card block inverse color="success">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+      <Card block inverse color="info">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+      <Card block inverse color="warning">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+      <Card block inverse color="danger">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+    </div>
+  );
+};
+
+const Example33 = (props: any) => {
+  return (
+    <div>
+      <Card block outline color="secondary">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button>Button</Button>
+      </Card>
+      <Card block outline color="primary">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+      <Card block outline color="success">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+      <Card block outline color="info">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+      <Card block outline color="warning">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+      <Card block outline color="danger">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+    </div>
+  );
+};
+
+const Example34 = (props: any) => {
+  return (
+    <CardGroup>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>
+            This is a wider card with supporting text below as a natural lead-in to additional content. This
+            card has even longer content than the first to show that equal height action.
+          </CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+    </CardGroup>
+  );
+};
+
+const Example35 = (props: any) => {
+  return (
+    <CardDeck>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>
+              This is a wider card with supporting text below as a natural lead-in to additional content. This card has
+              even longer content than the first to show that equal height action.
+          </CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+    </CardDeck>
+  );
+};
+
+const Example36 = (props: any) => {
+  return (
+    <CardColumns>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
+      </Card>
+      <Card>
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card block inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button>Button</Button>
+      </Card>
+      <Card>
+        <CardImg top width="100%"
+                 src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180"
+                 alt="Card image cap" />
+        <CardBody>
+          <CardTitle>Card title</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>
+              This is a wider card with supporting text below as a natural lead-in to additional content. This card
+              has even longer content than the first to show that equal height action.
+          </CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card block inverse color="primary">
+        <CardTitle>Special Title Treatment</CardTitle>
+        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+        <Button color="secondary">Button</Button>
+      </Card>
+    </CardColumns>
+  );
+};
+
+// ------------------ Collapse
+
+class Example37 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+    this.state = { collapse: false };
+  }
+
+  toggle() {
+    this.setState({ collapse: !this.state.collapse });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
+        <Collapse isOpen={this.state.collapse}>
+          <Card>
+            <CardBody>
+              Anim pariatur cliche reprehenderit,
+             enim eiusmod high life accusamus terry richardson ad squid. Nihil
+             anim keffiyeh helvetica, craft beer labore wes anderson cred
+             nesciunt sapiente ea proident.
+            </CardBody>
+          </Card>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+class Example38 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.onOpened = this.onOpened.bind(this);
+    this.onClosed = this.onClosed.bind(this);
+    this.toggle = this.toggle.bind(this);
+    this.state = { collapse: false, status: 'Closed' };
+  }
+
+  onOpened() {
+    this.setState({ ...this.state, status: 'Opened' });
+  }
+
+  onClosed() {
+    this.setState({ ...this.state, status: 'Closed' });
+  }
+
+  toggle() {
+    const status = !this.state.collapse ? 'Opening...' : 'Closing...';
+    this.setState({ collapse: !this.state.collapse, status });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
+        <h5>Current state: {this.state.status}</h5>
+        <Collapse isOpen={this.state.collapse} onOpened={this.onOpened} onClosed={this.onClosed}>
+          <Card>
+            <CardBody>
+              Anim pariatur cliche reprehenderit,
+             enim eiusmod high life accusamus terry richardson ad squid. Nihil
+             anim keffiyeh helvetica, craft beer labore wes anderson cred
+             nesciunt sapiente ea proident.
+            </CardBody>
+          </Card>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+// ------- Dropdown
+
+class Example39 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+        <DropdownToggle caret>
+          Dropdown
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem header>Header</DropdownItem>
+          <DropdownItem disabled>Action</DropdownItem>
+          <DropdownItem>Another Action</DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem>Another Action</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+const Example40 = (props: any) => (
+  <Dropdown isOpen={false} toggle={() => false}>
+    <DropdownToggle caret>
+      Dropdown
+  </DropdownToggle>
+    <DropdownMenu right>
+      <DropdownItem header>Header</DropdownItem>
+      <DropdownItem disabled>Action</DropdownItem>
+      <DropdownItem>Another Action</DropdownItem>
+      <DropdownItem divider />
+      <DropdownItem>Another Action</DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+);
+
+const Example41 = (props: any) => (
+  <DropdownItem header>Header</DropdownItem>
+);
+
+const Example42 = (props: any) => (
+  <div>
+    <DropdownItem divider />
+    <DropdownItem>Action</DropdownItem>
+    <DropdownItem disabled>Action</DropdownItem>
+    <Dropdown group isOpen={true} size="lg" toggle={() => true}>
+      <DropdownToggle caret>asdfasd</DropdownToggle>
+      <DropdownMenu>sadfas</DropdownMenu>
+    </Dropdown>
+
+    <Dropdown isOpen={true} toggle={() => true}>
+      <DropdownToggle caret>sadfasd</DropdownToggle>
+      <DropdownMenu>sadf</DropdownMenu>
+    </Dropdown>
+
+    <Dropdown group isOpen={true} size="sm" toggle={() => true}>
+      <DropdownToggle caret>asdf</DropdownToggle>
+      <DropdownMenu>sasdfsdf</DropdownMenu>
+    </Dropdown>
+
+  </div>
+);
+
+class Example43 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+        <span
+          onClick={this.toggle}
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded={this.state.dropdownOpen}
+        >
+          Custom Dropdown Content
+        </span>
+        <DropdownMenu>
+          <div onClick={this.toggle}>Custom dropdown item</div>
+          <div onClick={this.toggle}>Custom dropdown item</div>
+          <div onClick={this.toggle}>Custom dropdown item</div>
+          <div onClick={this.toggle}>Custom dropdown item</div>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+function Example44() {
+  return (
+    <UncontrolledDropdown className="some-class">
+      <DropdownToggle caret>
+        Dropdown
+      </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem header>Header</DropdownItem>
+        <DropdownItem disabled>Action</DropdownItem>
+        <DropdownItem>Another Action</DropdownItem>
+        <DropdownItem divider />
+        <DropdownItem>Another Action</DropdownItem>
+      </DropdownMenu>
+    </UncontrolledDropdown>
+  );
+}
+
+// ------------------ Form
+class Example45 extends React.Component {
+  render() {
+    return (
+      <Form>
+        <FormGroup>
+          <Label for="exampleEmail">Email</Label>
+          <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="examplePassword">Password</Label>
+          <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleSelect">Select</Label>
+          <Input type="select" name="select" id="exampleSelect">
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+            <option>4</option>
+            <option>5</option>
+          </Input>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleSelectMulti">Select Multiple</Label>
+          <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+            <option>4</option>
+            <option>5</option>
+          </Input>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleText">Text Area</Label>
+          <Input type="textarea" name="text" id="exampleText" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleFile">File</Label>
+          <Input type="file" name="file" id="exampleFile" />
+          <FormText color="muted">
+            This is some placeholder block-level help text for the above input.
+            It's a bit lighter and easily wraps to a new line.
+          </FormText>
+        </FormGroup>
+        <FormGroup tag="fieldset">
+          <legend>Radio Buttons</legend>
+          <FormGroup check>
+            <Label check>
+              <Input type="radio" name="radio1" />{' '}
+              Option one is this and that—be sure to include why it's great
+            </Label>
+          </FormGroup>
+          <FormGroup check>
+            <Label check>
+              <Input type="radio" name="radio1" />{' '}
+              Option two can be something else and selecting it will deselect option one
+            </Label>
+          </FormGroup>
+          <FormGroup check disabled>
+            <Label check>
+              <Input type="radio" name="radio1" disabled />{' '}
+              Option three is disabled
+            </Label>
+          </FormGroup>
+        </FormGroup>
+        <FormGroup check>
+          <Label check>
+            <Input type="checkbox" />{' '}
+            Check me out
+          </Label>
+        </FormGroup>
+        <FormGroup tag="fieldset">
+          <FormGroup check inline>
+            <Label check>
+              <Input type="checkbox" />{' '}
+              Check me out
+            </Label>
+          </FormGroup>
+          <FormGroup check inline>
+            <Label check>
+              <Input type="checkbox" />{' '}
+              Check me out as well
+            </Label>
+          </FormGroup>
+        </FormGroup>
+        <Button>Submit</Button>
+      </Form>
+    );
+  }
+}
+
+class Example46 extends React.Component {
+  render() {
+    return (
+      <Form>
+        <FormGroup row>
+          <Label for="exampleEmail" sm={2}>Email</Label>
+          <Col sm={10}>
+            <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
+          </Col>
+        </FormGroup>
+        <FormGroup row>
+          <Label for="examplePassword" sm={2}>Password</Label>
+          <Col sm={10}>
+            <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
+          </Col>
+        </FormGroup>
+        <FormGroup row>
+          <Label for="exampleSelect" sm={2}>Select</Label>
+          <Col sm={10}>
+            <Input type="select" name="select" id="exampleSelect" />
+          </Col>
+        </FormGroup>
+        <FormGroup row>
+          <Label for="exampleSelectMulti" sm={2}>Select Multiple</Label>
+          <Col sm={10}>
+            <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple />
+          </Col>
+        </FormGroup>
+        <FormGroup row>
+          <Label for="exampleText" sm={2}>Text Area</Label>
+          <Col sm={10}>
+            <Input type="textarea" name="text" id="exampleText" />
+          </Col>
+        </FormGroup>
+        <FormGroup row>
+          <Label for="exampleFile" sm={2}>File</Label>
+          <Col sm={10}>
+            <Input type="file" name="file" id="exampleFile" />
+            <FormText color="muted">
+              This is some placeholder block-level help text for the above input.
+              It's a bit lighter and easily wraps to a new line.
+            </FormText>
+          </Col>
+        </FormGroup>
+        <FormGroup tag="fieldset" row>
+          <legend className="col-form-legend col-sm-2">Radio Buttons</legend>
+          <Col sm={10}>
+            <FormGroup check>
+              <Label check>
+                <Input type="radio" name="radio2" />{' '}
+                Option one is this and that—be sure to include why it's great
+              </Label>
+            </FormGroup>
+            <FormGroup check>
+              <Label check>
+                <Input type="radio" name="radio2" />{' '}
+                Option two can be something else and selecting it will deselect option one
+              </Label>
+            </FormGroup>
+            <FormGroup check disabled>
+              <Label check>
+                <Input type="radio" name="radio2" disabled />{' '}
+                Option three is disabled
+              </Label>
+            </FormGroup>
+          </Col>
+        </FormGroup>
+        <FormGroup row>
+          <Label for="checkbox2" sm={2}>Checkbox</Label>
+          <Col sm={{ size: 10 }}>
+            <FormGroup check>
+              <Label check>
+                <Input type="checkbox" id="checkbox2" />{' '}
+                Check me out
+              </Label>
+            </FormGroup>
+          </Col>
+        </FormGroup>
+        <FormGroup check row>
+          <Col sm={{ size: 10, offset: 2 }}>
+            <Button>Submit</Button>
+          </Col>
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+
+class Example47 extends React.Component {
+  render() {
+    return (
+      <Form inline>
+        <FormGroup>
+          <Label for="exampleEmail">Email</Label>{' '}
+          <Input type="email" name="email" id="exampleEmail" placeholder="something@idk.cool" />
+        </FormGroup>
+        {' '}
+        <FormGroup>
+          <Label for="examplePassword">Password</Label>{' '}
+          <Input type="password" name="password" id="examplePassword" placeholder="don't tell!" />
+        </FormGroup>
+        {' '}
+        <Button>Submit</Button>
+      </Form>
+    );
+  }
+}
+
+class Example48 extends React.Component {
+  render() {
+    return (
+      <Form>
+        <FormGroup color="success">
+          <Label for="exampleEmail">Input with success</Label>
+          <Input state="success" />
+          <FormFeedback>Success! You did it!</FormFeedback>
+          <FormText color="muted">Example help text that remains unchanged.</FormText>
+        </FormGroup>
+        <FormGroup color="warning">
+          <Label for="examplePassword">Input with warning</Label>
+          <Input state="warning" />
+          <FormFeedback>Whoops, check your formatting and try again.</FormFeedback>
+          <FormText color="muted">Example help text that remains unchanged.</FormText>
+        </FormGroup>
+        <FormGroup color="danger">
+          <Label for="examplePassword">Input with danger</Label>
+          <Input state="danger" />
+          <FormFeedback>Oh noes! that name is already taken</FormFeedback>
+          <FormText color="muted">Example help text that remains unchanged.</FormText>
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+
+class Example49 extends React.Component {
+  render() {
+    return (
+      <Form>
+        <FormGroup>
+          <Label for="exampleEmail">Static</Label>
+          <Input>Some static value</Input>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleEmail">Email</Label>
+          <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="examplePassword">Password</Label>
+          <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleUrl">Url</Label>
+          <Input type="url" name="url" id="exampleUrl" placeholder="url placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleNumber">Number</Label>
+          <Input type="number" name="number" id="exampleNumber" placeholder="number placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleDatetime">Datetime</Label>
+          <Input type="datetime" name="datetime" id="exampleDatetime" placeholder="datetime placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleDate">Date</Label>
+          <Input type="date" name="date" id="exampleDate" placeholder="date placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleTime">Time</Label>
+          <Input type="time" name="time" id="exampleTime" placeholder="time placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleColor">Color</Label>
+          <Input type="color" name="color" id="exampleColor" placeholder="color placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleSearch">Search</Label>
+          <Input type="search" name="search" id="exampleSearch" placeholder="search placeholder" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleSelect">Select</Label>
+          <Input type="select" name="select" id="exampleSelect">
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+            <option>4</option>
+            <option>5</option>
+          </Input>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleSelectMulti">Select Multiple</Label>
+          <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+            <option>4</option>
+            <option>5</option>
+          </Input>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleText">Text Area</Label>
+          <Input type="textarea" name="text" id="exampleText" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleFile">File</Label>
+          <Input type="file" name="file" id="exampleFile" />
+          <FormText color="muted">
+            This is some placeholder block-level help text for the above input.
+            It's a bit lighter and easily wraps to a new line.
+          </FormText>
+        </FormGroup>
+        <FormGroup check>
+          <Label check>
+            <Input type="radio" />{' '}
+            Option one is this and that—be sure to include why it's great
+          </Label>
+        </FormGroup>
+        <FormGroup check>
+          <Label check>
+            <Input type="checkbox" />{' '}
+            Check me out
+          </Label>
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+
+class Example50 extends React.Component {
+  render() {
+    return (
+      <Form>
+        <Input placeholder="lg" bsSize="lg" />
+        <Input placeholder="default" />
+        <Input placeholder="sm" bsSize="sm" />
+        <Input type="select" bsSize="lg">
+          <option>Large Select</option>
+        </Input>
+        <Input type="select">
+          <option>Default Select</option>
+        </Input>
+        <Input type="select" bsSize="sm">
+          <option>Small Select</option>
+        </Input>
+      </Form>
+    );
+  }
+}
+
+class Example51 extends React.Component {
+  render() {
+    return (
+      <Form inline>
+        <FormGroup>
+          <Label for="exampleEmail" hidden>Email</Label>
+          <Input type="email" name="email" id="exampleEmail" placeholder="Email" />
+        </FormGroup>
+        {' '}
+        <FormGroup>
+          <Label for="examplePassword" hidden>Password</Label>
+          <Input type="password" name="password" id="examplePassword" placeholder="Password" />
+        </FormGroup>
+        {' '}
+        <Button>Submit</Button>
+      </Form>
+    );
+  }
+}
+
+const Example52 = (props: any) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">@</InputGroupAddon>
+        <Input placeholder="username" />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">
+          <Input addon type="checkbox" aria-label="Checkbox for following text input" />
+        </InputGroupAddon>
+        <Input placeholder="Check it out" />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input placeholder="username" />
+        <InputGroupAddon addonType="prepend">@example.com</InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">
+          <InputGroupText>$</InputGroupText>
+          <InputGroupText>$</InputGroupText>
+        </InputGroupAddon>
+        <Input placeholder="Dolla dolla billz yo!" />
+        <InputGroupAddon addonType="append">
+          <InputGroupText>$</InputGroupText>
+          <InputGroupText>$</InputGroupText>
+        </InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">$</InputGroupAddon>
+        <Input placeholder="Amount" type="number" step="1" />
+        <InputGroupAddon addonType="append">.00</InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+
+const Example53 = (props: any) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">To the Left!</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input />
+        <InputGroupAddon addonType="append">To the Right!</InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">To the Left!</InputGroupAddon>
+        <Input placeholder="and..." />
+        <InputGroupAddon addonType="append">To the Right!</InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+
+const Example54 = (props: any) => {
+  return (
+    <div>
+      <InputGroup size="lg">
+        <InputGroupAddon addonType="prepend">@lg</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">@normal</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup size="sm">
+        <InputGroupAddon addonType="prepend">@sm</InputGroupAddon>
+        <Input />
+      </InputGroup>
+    </div>
+  );
+};
+
+const Example55 = (props: any) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupAddon addonType="prepend"><Button>I'm a button</Button></InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input />
+        <InputGroupAddon addonType="append"></InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend"></InputGroupAddon>
+        <Input placeholder="and..." />
+        <InputGroupAddon addonType="append"><Button color="secondary">I'm a button</Button></InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+
+const Example56 = (props: any) => {
+  return (
+    <div>
+      <InputGroup size="lg">
+        <InputGroupAddon addonType="prepend">@lg</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">@normal</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup size="sm">
+        <InputGroupAddon addonType="prepend">@sm</InputGroupAddon>
+        <Input />
+      </InputGroup>
+    </div>
+  );
+};
+
+const Example57 = (props: any) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupAddon addonType="prepend"><Button>I'm a button</Button></InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input />
+        <InputGroupAddon addonType="prepend"></InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend"></InputGroupAddon>
+        <Input placeholder="and..." />
+        <InputGroupAddon addonType="append"><Button color="secondary">I'm a button</Button></InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+
+const Example58 = (props: any) => {
+  return (
+    <div>
+      <InputGroup>
+        <InputGroupAddon addonType="prepend">To the Left!</InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input />
+        <InputGroupAddon addonType="append" color="secondary">To the Right!</InputGroupAddon>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupAddon addonType="prepend" color="danger">To the Left!</InputGroupAddon>
+        <Input placeholder="and..." />
+        <InputGroupAddon addonType="append" color="success">To the Right!</InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+
+const Example59 = (props: any) => {
+  return (
+    <div>
+      <Jumbotron>
+        <h1 className="display-3">Hello, world!</h1>
+        <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
+        <hr className="my-2" />
+        <p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
+        <p className="lead">
+          <Button color="primary">Learn More</Button>
+        </p>
+      </Jumbotron>
+    </div>
+  );
+};
+
+const Example60 = (props: any) => {
+  return (
+    <div>
+      <Jumbotron fluid>
+        <Container fluid>
+          <h1 className="display-3">Fluid jumbotron</h1>
+          <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
+        </Container>
+      </Jumbotron>
+    </div>
+  );
+};
+
+class Example61 extends React.Component {
+  render() {
+    return (
+      <Container>
+        <Row>
+          <Col>.col</Col>
+        </Row>
+        <Row>
+          <Col>.col</Col>
+          <Col>.col</Col>
+          <Col>.col</Col>
+          <Col>.col</Col>
+        </Row>
+        <Row>
+          <Col xs="3">.col-3</Col>
+          <Col xs="auto">.col-auto - variable width content</Col>
+          <Col xs="3">.col-3</Col>
+        </Row>
+        <Row>
+          <Col xs="6">.col-6</Col>
+          <Col xs="6">.col-6</Col>
+        </Row>
+        <Row>
+          <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
+          <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
+          <Col sm="4">.col .col-sm-4</Col>
+        </Row>
+        <Row>
+          <Col sm={{ size: 6, push: 2, pull: 2, offset: 1 }}>.col .col-sm-6 .col-sm-push-2 .col-sm-pull-2 .col-sm-offset-2</Col>
+        </Row>
+        <Row>
+          <Col sm="12" md={{ size: 8, offset: 2 }}>.col .col-sm-12 .col-md-6 .col-md-offset-3</Col>
+        </Row>
+        <Row>
+          <Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
+          <Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
+        </Row>
+      </Container>
+    );
+  }
+}
+
+class Example62 extends React.Component {
+  render() {
+    return (
+      <ListGroup>
+        <ListGroupItem>Cras justo odio</ListGroupItem>
+        <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
+        <ListGroupItem>Morbi leo risus</ListGroupItem>
+        <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
+        <ListGroupItem>Vestibulum at eros</ListGroupItem>
+      </ListGroup>
+    );
+  }
+}
+
+class Example63 extends React.Component {
+  render() {
+    return (
+      <ListGroup>
+        <ListGroupItem className="justify-content-between">Cras justo odio <Badge pill>14</Badge></ListGroupItem>
+        <ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge pill>2</Badge></ListGroupItem>
+        <ListGroupItem className="justify-content-between">Morbi leo risus <Badge pill>1</Badge></ListGroupItem>
+      </ListGroup>
+    );
+  }
+}
+
+class Example64 extends React.Component {
+  render() {
+    return (
+      <ListGroup>
+        <ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+      </ListGroup>
+    );
+  }
+}
+
+class Example65 extends React.Component {
+  render() {
+    return (
+      <div>
+        <h3>Anchors </h3>
+        <p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
+        <ListGroup>
+          <ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
+          <ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
+          <ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
+          <ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
+          <ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
+        </ListGroup>
+        <p />
+        <h3>Buttons </h3>
+        <ListGroup>
+          <ListGroupItem active tag="button" action>Cras justo odio</ListGroupItem>
+          <ListGroupItem tag="button" action>Dapibus ac facilisis in</ListGroupItem>
+          <ListGroupItem tag="button" action>Morbi leo risus</ListGroupItem>
+          <ListGroupItem tag="button" action>Porta ac consectetur ac</ListGroupItem>
+          <ListGroupItem disabled tag="button" action>Vestibulum at eros</ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+}
+
+class Example66 extends React.Component {
+  render() {
+    return (
+      <ListGroup>
+        <ListGroupItem color="success">Cras justo odio</ListGroupItem>
+        <ListGroupItem color="info">Dapibus ac facilisis in</ListGroupItem>
+        <ListGroupItem color="warning">Morbi leo risus</ListGroupItem>
+        <ListGroupItem color="danger">Porta ac consectetur ac</ListGroupItem>
+      </ListGroup>
+    );
+  }
+}
+
+class Example67 extends React.Component {
+  render() {
+    return (
+      <ListGroup>
+        <ListGroupItem active>
+          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+          <ListGroupItemText>
+            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+          </ListGroupItemText>
+        </ListGroupItem>
+        <ListGroupItem>
+          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+          <ListGroupItemText>
+            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+          </ListGroupItemText>
+        </ListGroupItem>
+        <ListGroupItem>
+          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+          <ListGroupItemText>
+            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+          </ListGroupItemText>
+        </ListGroupItem>
+      </ListGroup>
+    );
+  }
+}
+
+// ------------- Media
+const Example68 = () => {
+  return (
+    <Media>
+      <Media left href="#">
+        <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+      </Media>
+      <Media body>
+        <Media heading>
+          Media heading
+        </Media>
+        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
+        odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
+        Donec lacinia congue felis in faucibus.
+      </Media>
+    </Media>
+  );
+};
+
+const Example69 = () => {
+  return (
+    <Media>
+      <Media left href="#">
+        <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+      </Media>
+      <Media body>
+        <Media heading>
+          Media heading
+        </Media>
+        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
+        odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
+        Donec lacinia congue felis in faucibus.
+        <Media>
+          <Media left href="#">
+            <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+          </Media>
+          <Media body>
+            <Media heading>
+              Nested media heading
+            </Media>
+            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+            purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+            fringilla. Donec lacinia congue felis in faucibus.
+          </Media>
+        </Media>
+      </Media>
+    </Media>
+  );
+};
+
+const Example70 = () => {
+  return (
+    <div>
+      <Media>
+        <Media left top href="#">
+          <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+        </Media>
+        <Media body>
+          <Media heading>
+            Top aligned media
+          </Media>
+          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+          purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+          fringilla. Donec lacinia congue felis in faucibus.
+        </Media>
+      </Media>
+      <Media className="mt-1">
+        <Media left middle href="#">
+          <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+        </Media>
+        <Media body>
+          <Media heading>
+            Middle aligned media
+          </Media>
+          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+          purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+          fringilla. Donec lacinia congue felis in faucibus.
+        </Media>
+      </Media>
+      <Media className="mt-1">
+        <Media left bottom href="#">
+          <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+        </Media>
+        <Media body>
+          <Media heading>
+            Bottom aligned media
+          </Media>
+          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+          purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+          fringilla. Donec lacinia congue felis in faucibus.
+        </Media>
+      </Media>
+    </div>
+  );
+};
+
+const Example71 = () => {
+  return (
+    <Media list>
+      <Media tag="li">
+        <Media left href="#">
+          <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+        </Media>
+        <Media body>
+          <Media heading>
+            Media heading
+          </Media>
+          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+          purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+          fringilla. Donec lacinia congue felis in faucibus.
+          <Media>
+            <Media left href="#">
+              <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+            </Media>
+            <Media body>
+              <Media heading>
+                Nested media heading
+              </Media>
+              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
+              Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
+              vulputate fringilla. Donec lacinia congue felis in faucibus.
+              <Media>
+                <Media left href="#">
+                  <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+                </Media>
+                <Media body>
+                  <Media heading>
+                    Nested media heading
+                  </Media>
+                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
+                  Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
+                  vulputate fringilla. Donec lacinia congue felis in faucibus.
+                </Media>
+              </Media>
+            </Media>
+          </Media>
+          <Media>
+            <Media left href="#">
+              <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+            </Media>
+            <Media body>
+              <Media heading>
+                Nested media heading
+              </Media>
+              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+              purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+              fringilla. Donec lacinia congue felis in faucibus.
+            </Media>
+          </Media>
+        </Media>
+      </Media>
+      <Media tag="li">
+        <Media body>
+          <Media heading>
+            Media heading
+          </Media>
+          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+          purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+          fringilla. Donec lacinia congue felis in faucibus.
+        </Media>
+        <Media right href="#">
+          <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+        </Media>
+      </Media>
+    </Media>
+  );
+};
+
+// --------------- Modal
+class ModalExample72 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      modal: false
+    };
+
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      modal: !this.state.modal
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
+        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
+          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
+          <ModalBody>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </ModalBody>
+          <ModalFooter>
+            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
+            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
+          </ModalFooter>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+class ModalExample73 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      modal: false,
+      backdrop: true
+    };
+
+    this.toggle = this.toggle.bind(this);
+    this.changeBackdrop = this.changeBackdrop.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      modal: !this.state.modal
+    });
+  }
+
+  changeBackdrop(e: React.ChangeEvent<HTMLInputElement>) {
+    let value = e.target.value;
+    if (value !== 'static') {
+      value = JSON.parse(value);
+    }
+    this.setState({ backdrop: value });
+  }
+
+  render() {
+    return (
+      <div>
+        <Form inline onSubmit={(e) => e.preventDefault()}>
+          <FormGroup>
+            <Label for="backdrop">Backdrop value</Label>{' '}
+            <Input type="select" name="backdrop" id="backdrop" onChange={this.changeBackdrop}>
+              <option value="true">true</option>
+              <option value="false">false</option>
+              <option value="static">"static"</option>
+            </Input>
+          </FormGroup>
+          {' '}
+          <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
+        </Form>
+        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className} backdrop={this.state.backdrop}>
+          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
+          <ModalBody>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.
+          </ModalBody>
+          <ModalFooter>
+            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
+            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
+          </ModalFooter>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+class ModalExample74 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      modal: false,
+      nestedModal: false,
+    };
+
+    this.toggle = this.toggle.bind(this);
+    this.toggleNested = this.toggleNested.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      modal: !this.state.modal
+    });
+  }
+
+  toggleNested() {
+    this.setState({
+      nestedModal: !this.state.nestedModal
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
+        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
+          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
+          <ModalBody>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.
+            <br />
+            <Button color="success" onClick={this.toggleNested}>Show Nested Model</Button>
+            <Modal isOpen={this.state.nestedModal} toggle={this.toggleNested}>
+              <ModalHeader>Nested Modal title</ModalHeader>
+              <ModalBody>Stuff and things</ModalBody>
+              <ModalFooter>
+                <Button color="primary" onClick={this.toggleNested}>Done</Button>{' '}
+                <Button color="secondary" onClick={this.toggle}>All Done</Button>
+              </ModalFooter>
+            </Modal>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
+            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
+          </ModalFooter>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+class Example75 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Navbar color="faded" light expand="md">
+          <NavbarBrand href="/">reactstrap</NavbarBrand>
+          <NavbarToggler onClick={this.toggle} />
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink href="/components/">Components</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+              </NavItem>
+              <UncontrolledDropdown nav inNavbar>
+                <DropdownToggle nav caret>
+                  Options
+                </DropdownToggle>
+                <DropdownMenu >
+                  <DropdownItem>
+                    Option 1
+                  </DropdownItem>
+                  <DropdownItem>
+                    Option 2
+                  </DropdownItem>
+                  <DropdownItem divider />
+                  <DropdownItem>
+                    Reset
+                  </DropdownItem>
+                </DropdownMenu>
+              </UncontrolledDropdown>
+            </Nav>
+          </Collapse>
+        </Navbar>
+      </div>
+    );
+  }
+}
+
+class Example76 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggleNavbar = this.toggleNavbar.bind(this);
+    this.state = {
+      collapsed: true
+    };
+  }
+
+  toggleNavbar() {
+    this.setState({
+      collapsed: !this.state.collapsed
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Navbar color="faded" light>
+          <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
+          <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
+          <Collapse isOpen={!this.state.collapsed} navbar>
+            <Nav navbar>
+              <NavItem>
+                <NavLink href="/components/">Components</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Navbar>
+      </div>
+    );
+  }
+}
+
+class Example77 extends React.Component {
+  render() {
+    return (
+      <div>
+        <p>List Based</p>
+        <Nav>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Another Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink disabled href="#">Disabled Link</NavLink>
+          </NavItem>
+        </Nav>
+        <hr />
+        <p>Link Based</p>
+        <Nav>
+          <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
+        </Nav>
+      </div>
+    );
+  }
+}
+
+class Example78 extends React.Component<any, any> {
+  render() {
+    return (
+      <div>
+        <p>List Based</p>
+        <Nav vertical>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Another Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink disabled href="#">Disabled Link</NavLink>
+          </NavItem>
+        </Nav>
+        <hr />
+        <p>Link based</p>
+        <Nav vertical>
+          <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
+        </Nav>
+      </div>
+    );
+  }
+}
+
+class Example79 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Nav tabs>
+          <NavItem>
+            <NavLink href="#" active>Link</NavLink>
+          </NavItem>
+          <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+            <DropdownToggle nav caret>
+              Dropdown
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem header>Header</DropdownItem>
+              <DropdownItem disabled>Action</DropdownItem>
+              <DropdownItem>Another Action</DropdownItem>
+              <DropdownItem divider />
+              <DropdownItem>Another Action</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Another Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink disabled href="#">Disabled Link</NavLink>
+          </NavItem>
+        </Nav>
+      </div>
+    );
+  }
+}
+
+class Example80 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Nav pills>
+          <NavItem>
+            <NavLink href="#" active>Link</NavLink>
+          </NavItem>
+          <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+            <DropdownToggle nav caret>
+              Dropdown
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem header>Header</DropdownItem>
+              <DropdownItem disabled>Action</DropdownItem>
+              <DropdownItem>Another Action</DropdownItem>
+              <DropdownItem divider />
+              <DropdownItem>Another Action</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Another Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink disabled href="#">Disabled Link</NavLink>
+          </NavItem>
+        </Nav>
+      </div>
+    );
+  }
+}
+
+// ----------- Pagination
+class Example81 extends React.Component {
+  render() {
+    return (
+      <Pagination>
+        <PaginationItem>
+          <PaginationLink previous href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            1
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            3
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            4
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            5
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink next href="#" />
+        </PaginationItem>
+      </Pagination>
+    );
+  }
+}
+
+class Example82 extends React.Component {
+  render() {
+    return (
+      <Pagination>
+        <PaginationItem disabled>
+          <PaginationLink previous href="#" />
+        </PaginationItem>
+        <PaginationItem active>
+          <PaginationLink href="#">
+            1
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            3
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            4
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            5
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink next href="#" />
+        </PaginationItem>
+      </Pagination>
+    );
+  }
+}
+
+class Example83 extends React.Component {
+  render() {
+    return (
+      <Pagination size="lg">
+        <PaginationItem>
+          <PaginationLink previous href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            1
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            3
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink next href="#" />
+        </PaginationItem>
+      </Pagination>
+    );
+  }
+}
+
+class Example84 extends React.Component {
+  render() {
+    return (
+      <Pagination size="sm">
+        <PaginationItem>
+          <PaginationLink previous href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            1
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">
+            3
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink next href="#" />
+        </PaginationItem>
+      </Pagination>
+    );
+  }
+}
+
+// ------------------------- Popover
+class Example85 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      popoverOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      popoverOpen: !this.state.popoverOpen
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button id="Popover1" onClick={this.toggle}>
+          Launch Popover
+        </Button>
+        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle} onClick={() => {}}>
+          <PopoverHeader>Popover Title</PopoverHeader>
+          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
+        </Popover>
+      </div>
+    );
+  }
+}
+
+class PopoverItem extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      popoverOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      popoverOpen: !this.state.popoverOpen
+    });
+  }
+
+  render() {
+    return (
+      <span>
+        <Button className="mr-1" color="secondary" id={'Popover-' + this.props.id} onClick={this.toggle}>
+          {this.props.item.text}
+        </Button>
+        <Popover placement={this.props.item.placement} isOpen={this.state.popoverOpen} target={'Popover-' + this.props.id} toggle={this.toggle} hideArrow={true}>
+          <PopoverHeader>Popover Title</PopoverHeader>
+          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
+        </Popover>
+      </span>
+    );
+  }
+}
+
+class PopoverExampleMulti extends React.Component<any, {popovers: Array<{placement: string; text: string; }>}> {
+  state: {popovers: Array<{placement: string; text: string; }>};
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      popovers: [
+        {
+          placement: 'top',
+          text: 'Top'
+        },
+        {
+          placement: 'bottom',
+          text: 'Bottom'
+        },
+        {
+          placement: 'left',
+          text: 'Left'
+        },
+        {
+          placement: 'right',
+          text: 'Right'
+        }
+      ]
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.popovers.map((popover, i) => {
+          return <PopoverItem key={i} item={popover} id={i} />;
+        })}
+      </div>
+    );
+  }
+}
+
+// ------------------------- Progress
+
+const Example86 = (props: any) => {
+  return (
+    <div>
+      <div className="text-center">0%</div>
+      <Progress />
+      <div className="text-center">25%</div>
+      <Progress value="25" />
+      <div className="text-center">50%</div>
+      <Progress value={50} />
+      <div className="text-center">75%</div>
+      <Progress value={75} />
+      <div className="text-center">100%</div>
+      <Progress value="100" />
+      <div className="text-center">Multiple bars</div>
+      <Progress multi>
+        <Progress bar value="15" />
+        <Progress bar color="success" value="30" />
+        <Progress bar color="info" value="25" />
+        <Progress bar color="warning" value="20" />
+        <Progress bar color="danger" value="5" />
+      </Progress>
+    </div>
+  );
+};
+
+const Example87 = (props: any) => {
+  return (
+    <div>
+      <Progress value={2 * 5} />
+      <Progress color="success" value="25" />
+      <Progress color="info" value={50} />
+      <Progress color="warning" value={75} />
+      <Progress color="danger" value="100" />
+    </div>
+  );
+};
+
+const Example88 = (props: any) => {
+  return (
+    <div>
+      <Progress value="25">25%</Progress>
+      <Progress value={50}>1/2</Progress>
+      <Progress value={75}>You're almost there!</Progress>
+      <Progress color="success" value="100">You did it!</Progress>
+      <Progress multi>
+        <Progress bar value="15">Meh</Progress>
+        <Progress bar color="success" value="30">Wow!</Progress>
+        <Progress bar color="info" value="25">Cool</Progress>
+        <Progress bar color="warning" value="20">20%</Progress>
+        <Progress bar color="danger" value="5">!!</Progress>
+      </Progress>
+    </div>
+  );
+};
+
+const Example89 = (props: any) => {
+  return (
+    <div>
+      <Progress striped value={2 * 5} />
+      <Progress striped color="success" value="25" />
+      <Progress striped color="info" value={50} />
+      <Progress striped color="warning" value={75} />
+      <Progress striped color="danger" value="100" />
+      <Progress multi>
+        <Progress striped bar value="10" />
+        <Progress striped bar color="success" value="30" />
+        <Progress striped bar color="warning" value="20" />
+        <Progress striped bar color="danger" value="20" />
+      </Progress>
+    </div>
+  );
+};
+
+const Example90 = (props: any) => {
+  return (
+    <div>
+      <Progress animated value={2 * 5} />
+      <Progress animated color="success" value="25" />
+      <Progress animated color="info" value={50} />
+      <Progress animated color="warning" value={75} />
+      <Progress animated color="danger" value="100" />
+      <Progress multi>
+        <Progress animated bar value="10" />
+        <Progress animated bar color="success" value="30" />
+        <Progress animated bar color="warning" value="20" />
+        <Progress animated bar color="danger" value="20" />
+      </Progress>
+    </div>
+  );
+};
+
+const Example91 = (props: any) => {
+  return (
+    <div>
+      <div className="text-center">Plain</div>
+      <Progress multi>
+        <Progress bar value="15" />
+        <Progress bar color="success" value="20" />
+        <Progress bar color="info" value="25" />
+        <Progress bar color="warning" value="20" />
+        <Progress bar color="danger" value="15" />
+      </Progress>
+      <div className="text-center">With Labels</div>
+      <Progress multi>
+        <Progress bar value="15">Meh</Progress>
+        <Progress bar color="success" value="35">Wow!</Progress>
+        <Progress bar color="warning" value="25">25%</Progress>
+        <Progress bar color="danger" value="25">LOOK OUT!!</Progress>
+      </Progress>
+      <div className="text-center">Stripes and Animations</div>
+      <Progress multi>
+        <Progress bar striped value="15">Stripes</Progress>
+        <Progress bar animated color="success" value="30">Animated Stripes</Progress>
+        <Progress bar color="info" value="25">Plain</Progress>
+      </Progress>
+    </div>
+  );
+};
+
+const Example92 = (props: any) => {
+  return (
+    <div>
+      <div className="text-center">1 of 5</div>
+      <Progress value="1" max="5" />
+      <div className="text-center">50 of 135</div>
+      <Progress value={50} max="135" />
+      <div className="text-center">75 of 111</div>
+      <Progress value={75} max={111} />
+      <div className="text-center">463 of 500</div>
+      <Progress value="463" max={500} />
+
+      <div className="text-center">Various (40) of 55</div>
+      <Progress multi>
+        <Progress bar value="5" max={55}>5</Progress>
+        <Progress bar color="success" value="15" max={55}>15</Progress>
+        <Progress bar color="warning" value="10" max={55}>10</Progress>
+        <Progress bar color="danger" value="10" max={55}>10</Progress>
+      </Progress>
+    </div>
+  );
+};
+
+// --------------- Table
+class Example93 extends React.Component {
+  render() {
+    return (
+      <Table>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example94 extends React.Component {
+  render() {
+    return (
+      <Table inverse>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example95 extends React.Component {
+  render() {
+    return (
+      <Table striped>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example96 extends React.Component {
+  render() {
+    return (
+      <Table bordered>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example97 extends React.Component {
+  render() {
+    return (
+      <Table hover>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example98 extends React.Component {
+  render() {
+    return (
+      <Table size="sm">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example99 extends React.Component {
+  render() {
+    return (
+      <Table responsive>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example100 extends React.Component {
+  render() {
+    return (
+      <Table responsive>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+            <th>Table heading</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+            <td>Table cell</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example101 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      activeTab: '1'
+    };
+  }
+
+  toggle(tab: string) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab
+      });
+    }
+  }
+  render() {
+    return (
+      <div>
+        <Nav tabs>
+          <NavItem>
+            <NavLink
+              className=""
+              onClick={() => { this.toggle('1'); }}
+            >
+              Tab1
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className=""
+              onClick={() => { this.toggle('2'); }}
+            >
+              Moar Tabs
+            </NavLink>
+          </NavItem>
+        </Nav>
+        <TabContent activeTab={this.state.activeTab}>
+          <TabPane tabId="1">
+            <Row>
+              <Col sm="12">
+                <h4>Tab 1 Contents</h4>
+              </Col>
+            </Row>
+          </TabPane>
+          <TabPane tabId="2">
+            <Row>
+              <Col sm="6">
+                <Card block>
+                  <CardTitle>Special Title Treatment</CardTitle>
+                  <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+                  <Button>Go somewhere</Button>
+                </Card>
+              </Col>
+              <Col sm="6">
+                <Card block>
+                  <CardTitle>Special Title Treatment</CardTitle>
+                  <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+                  <Button>Go somewhere</Button>
+                </Card>
+              </Col>
+            </Row>
+          </TabPane>
+        </TabContent>
+      </div>
+    );
+  }
+}
+
+class Example102 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      tooltipOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      tooltipOpen: !this.state.tooltipOpen
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
+        <Tooltip placement="right" isOpen={this.state.tooltipOpen} target="TooltipExample" toggle={this.toggle}>
+          Hello world!
+        </Tooltip>
+      </div>
+    );
+  }
+}
+
+class Example103 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      tooltipOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      tooltipOpen: !this.state.tooltipOpen
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <p>Sometimes you need to allow users to select text within a <a href="#" id="DisabledAutoHideExample">tooltip</a>.</p>
+        <Tooltip placement="top" isOpen={this.state.tooltipOpen} autohide={false} target="DisabledAutoHideExample" toggle={this.toggle}>
+          Try to select this text!
+        </Tooltip>
+      </div>
+    );
+  }
+}
+
+class TooltipItem extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      tooltipOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      tooltipOpen: !this.state.tooltipOpen
+    });
+  }
+
+  render() {
+    return (
+      <span>
+        <Button className="mr-1" color="secondary" id={'Tooltip-' + this.props.id}>
+          {this.props.item.text}
+        </Button>
+        <Tooltip placement={this.props.item.placement} isOpen={this.state.tooltipOpen} target={'Tooltip-' + this.props.id} toggle={this.toggle}>
+          Tooltip Content!
+        </Tooltip>
+      </span>
+    );
+  }
+}
+
+class TooltipExampleMulti extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      tooltips: [
+        {
+          placement: 'top',
+          text: 'Top'
+        },
+        {
+          placement: 'bottom',
+          text: 'Bottom'
+        },
+        {
+          placement: 'left',
+          text: 'Left'
+        },
+        {
+          placement: 'right',
+          text: 'Right'
+        }
+      ]
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.tooltips.map((tooltip: {placement: string; text: string; }, i: number) => {
+          return <TooltipItem key={i} item={tooltip} id={i} />;
+        })}
+      </div>
+    );
+  }
+}
+
+function Example() {
+  return (
+    <div>
+      <p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>
+      <UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
+        Hello world!
+      </UncontrolledTooltip>
+    </div>
+  );
+}
+
+function Example104() {
+  const props = {
+    className: 'my-input',
+    style: {
+      borderColor: 'black',
+    }
+  };
+
+  return (
+    <FormGroup
+      className="some-class"
+      aria-labelledby="label"
+    >
+      <Label sm={3} id="label">
+        Label
+      </Label>
+
+      <Col className="col-12" sm={9}>
+        <Input type="text" bsSize="lg" {...props} />
+      </Col>
+    </FormGroup>
+  );
+}
+
+function Example105() {
+  return (
+    <Dropdown
+      className="main-nav-avatar"
+      isOpen={true}
+      aria-labelledby="menu"
+    >
+      <a
+        href="javascript:void(0)"
+        id="menu"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+      >
+        Toggle
+      </a>
+
+      <DropdownMenu right className="asdf">
+        <div className="d-block">
+          Item
+        </div>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
+
+function Example106() {
+  return (
+    <Nav vertical>
+      <NavLink
+        className="toggle-drawer"
+        href="#"
+      >
+        Details
+      </NavLink>
+    </Nav>
+  );
+}
+
+const CSSModuleExample = (props: any) => {
+  const cssModule = {
+    btn: 'hash'
+  };
+
+  return (
+    <Button color="secondary" cssModule={cssModule}>Button</Button>
+  );
+};
+
+class Example107 extends React.Component {
+  private input: HTMLInputElement | null;
+
+  render() {
+    return <Input type="file" innerRef={(input) => { this.input = input; }} />;
+  }
+}
+
+class Example108 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Navbar color="faded" dark toggleable>
+          <NavbarToggler onClick={this.toggle} />
+          <NavbarBrand href="/">reactstrap</NavbarBrand>
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink href="/components/">Components</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Navbar>
+      </div>
+    );
+  }
+}
+
+class Example109 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Navbar color="faded" light expand>
+          <NavbarToggler onClick={this.toggle} />
+          <NavbarBrand href="/">reactstrap</NavbarBrand>
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink href="/components/">Components</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Navbar>
+      </div>
+    );
+  }
+}
+
+class Example110 extends React.Component<any, any> {
+   state: any;
+   constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Navbar color="faded" light expand="md">
+          <NavbarToggler onClick={this.toggle} />
+          <NavbarBrand href="/">reactstrap</NavbarBrand>
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink href="/components/">Components</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Navbar>
+      </div>
+    );
+  }
+}
+
+class Example111 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Navbar color="faded" light expand="md">
+          <NavbarToggler onClick={this.toggle} />
+          <NavbarBrand tag="a" href="/">reactstrap</NavbarBrand>
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink href="/components/">Components</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Navbar>
+      </div>
+    );
+  }
+}
+
+class Example112 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Navbar color="faded" light expand="md">
+          <NavbarToggler onClick={this.toggle} />
+          <NavbarBrand className="logo" href="/">reactstrap</NavbarBrand>
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink href="/components/">Components</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Navbar>
+      </div>
+    );
+  }
+}
+
+const Example113 = (props: any) => {
+    return (
+      <div>
+        <Card>
+          <CardBody>
+            Anim pariatur cliche reprehenderit,
+            enim eiusmod high life accusamus terry richardson ad squid. Nihil
+            anim keffiyeh helvetica, craft beer labore wes anderson cred
+            nesciunt sapiente ea proident.
+          </CardBody>
+        </Card>
+      </div>
+    );
+  };
+
+class Example114 extends React.Component<any, any> {
+    state: any;
+    private element: HTMLElement;
+
+    refFn(r: HTMLElement | null) {
+        if (r) {
+            this.element = r;
+        }
+    }
+
+    render() {
+        return (
+        <div>
+            <p>Somewhere in here is a <a href="#" ref={this.refFn}>tooltip</a>.</p>
+            <Tooltip placement="bottom-start" isOpen={this.state.tooltipOpen} target={this.element}>
+            Hello world!
+            </Tooltip>
+        </div>
+        );
+    }
+}
+
+class Example115 extends React.Component<any, any> {
+    // https://reactstrap.github.io/components/carousel/
+
+    private readonly items = [
+        {
+          src: 'data:image/svg+xml...',
+          altText: 'Slide 1',
+          caption: 'Slide 1'
+        },
+        {
+          src: 'data:image/svg+xml...',
+          altText: 'Slide 2',
+          caption: 'Slide 2'
+        },
+        {
+          src: 'data:image/svg+xml...',
+          altText: 'Slide 3',
+          caption: 'Slide 3'
+        }
+      ];
+
+    private animating: boolean;
+
+    state: any;
+    constructor(props: any) {
+      super(props);
+      this.state = { activeIndex: 0 };
+      this.next = this.next.bind(this);
+      this.previous = this.previous.bind(this);
+      this.goToIndex = this.goToIndex.bind(this);
+      this.onExiting = this.onExiting.bind(this);
+      this.onExited = this.onExited.bind(this);
+    }
+
+    onExiting() {
+      this.animating = true;
+    }
+
+    onExited() {
+      this.animating = false;
+    }
+
+    next() {
+      if (this.animating) return;
+      const nextIndex = this.state.activeIndex === this.items.length - 1 ? 0 : this.state.activeIndex + 1;
+      this.setState({ activeIndex: nextIndex });
+    }
+
+    previous() {
+      if (this.animating) return;
+      const nextIndex = this.state.activeIndex === 0 ? this.items.length - 1 : this.state.activeIndex - 1;
+      this.setState({ activeIndex: nextIndex });
+    }
+
+    goToIndex(newIndex: number) {
+      if (this.animating) return;
+      this.setState({ activeIndex: newIndex });
+    }
+
+    render() {
+      const { activeIndex } = this.state;
+
+      const slides = this.items.map((item) => {
+        return (
+          <CarouselItem
+            onExiting={this.onExiting}
+            onExited={this.onExited}
+            key={item.src}
+          >
+            <img src={item.src} alt={item.altText} />
+            <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
+          </CarouselItem>
+        );
+      });
+
+      return (
+        <Carousel
+          activeIndex={activeIndex}
+          next={this.next}
+          previous={this.previous}
+        >
+          <CarouselIndicators items={this.items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
+          {slides}
+          <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
+          <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
+        </Carousel>
+      );
+    }
+  }
+
+const Example116 = (props: any) => {
+  return(
+    <div>
+      <InputGroup>
+        <InputGroupAddon addonType="prepend"><Button>I'm a button</Button></InputGroupAddon>
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <Input />
+        <InputGroupButtonDropdown addonType="append" isOpen={false}>
+          <DropdownToggle caret>
+            Button Dropdown
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem header>Header</DropdownItem>
+            <DropdownItem disabled>Action</DropdownItem>
+            <DropdownItem>Another Action</DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem>Another Action</DropdownItem>
+          </DropdownMenu>
+        </InputGroupButtonDropdown>
+      </InputGroup>
+      <br />
+      <InputGroup>
+        <InputGroupButtonDropdown addonType="prepend" isOpen={true}>
+          <Button outline>Split Button</Button>
+          <DropdownToggle split outline />
+          <DropdownMenu>
+            <DropdownItem header>Header</DropdownItem>
+            <DropdownItem disabled>Action</DropdownItem>
+            <DropdownItem>Another Action</DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem>Another Action</DropdownItem>
+          </DropdownMenu>
+        </InputGroupButtonDropdown>
+        <Input placeholder="and..." />
+        <InputGroupAddon addonType="append"><Button color="secondary">I'm a button</Button></InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+};
+
+function Example117() {
+    const ref = (e: any) => {};
+
+    <Button ref={ref}/>;
+    <Carousel ref={ref} next={null as any} previous={null as any}/>;
+    <CarouselItem ref={ref}/>;
+    <Collapse ref={ref}/>;
+    <Dropdown ref={ref}/>;
+    <DropdownItem ref={ref}/>;
+    <DropdownToggle ref={ref}/>;
+    <Form ref={ref}/>;
+    <Input ref={ref}/>;
+    <Modal ref={ref}/>;
+    <NavLink ref={ref}/>;
+    <TabContent ref={ref}/>;
+    <Tooltip ref={ref} target={null as any}/>;
+    <UncontrolledAlert ref={ref}/>;
+    <UncontrolledButtonDropdown ref={ref}/>;
+    <UncontrolledDropdown ref={ref}/>;
+    <UncontrolledTooltip ref={ref} target={null as any}/>;
+    <UncontrolledCollapse ref={ref} target={null as any}/>;
+}
+
+function Example118() {
+    const ref: React.Ref<any> = React.createRef();
+
+    <Button innerRef={ref}/>;
+    <CardLink innerRef={ref}/>;
+    <Form innerRef={ref}/>;
+    <Input innerRef={ref}/>;
+    <NavLink innerRef={ref}/>;
+}
+
+import { default as Alert_ } from './lib/Alert'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Badge_ } from './lib/Badge'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Breadcrumb_ } from './lib/Breadcrumb'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as BreadcrumbItem_ } from './lib/BreadcrumbItem'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Button_, ButtonProps } from './lib/Button'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ButtonDropdown_ } from './lib/ButtonDropdown'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ButtonGroup_ } from './lib/ButtonGroup'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ButtonToolbar_ } from './lib/ButtonToolbar'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Card_ } from './lib/Card'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardBody_ } from './lib/CardBody'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardColumns_ } from './lib/CardColumns'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardDeck_ } from './lib/CardDeck'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardFooter_ } from './lib/CardFooter'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardGroup_ } from './lib/CardGroup'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardHeader_ } from './lib/CardHeader'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardImg_ } from './lib/CardImg'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardImgOverlay_ } from './lib/CardImgOverlay'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardLink_ } from './lib/CardLink'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardSubtitle_ } from './lib/CardSubtitle'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardText_ } from './lib/CardText'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CardTitle_ } from './lib/CardTitle'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Carousel_ } from './lib/Carousel'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CarouselItem_ } from './lib/CarouselItem'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CarouselControl_ } from './lib/CarouselControl'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CarouselIndicators_ } from './lib/CarouselIndicators'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CarouselCaption_ } from './lib/CarouselCaption'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Col_ } from './lib/Col'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Collapse_ } from './lib/Collapse'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Container_ } from './lib/Container'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as CustomInput_ } from './lib/CustomInput'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Dropdown_ } from './lib/Dropdown'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as DropdownItem_ } from './lib/DropdownItem'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as DropdownMenu_ } from './lib/DropdownMenu'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as DropdownToggle_ } from './lib/DropdownToggle'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Fade_ } from './lib/Fade'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Form_ } from './lib/Form'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as FormFeedback_ } from './lib/FormFeedback'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as FormGroup_ } from './lib/FormGroup'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as FormText_ } from './lib/FormText'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Input_ } from './lib/Input'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as InputGroup_ } from './lib/InputGroup'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as InputGroupAddon_ } from './lib/InputGroupAddon'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as InputGroupButtonDropdown_ } from './lib/InputGroupButtonDropdown'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as InputGroupText_ } from './lib/InputGroupText'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Jumbotron_ } from './lib/Jumbotron'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Label_ } from './lib/Label'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ListGroup_ } from './lib/ListGroup'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ListGroupItem_ } from './lib/ListGroupItem'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ListGroupItemHeading_ } from './lib/ListGroupItemHeading'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ListGroupItemText_ } from './lib/ListGroupItemText'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Media_ } from './lib/Media'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Modal_ } from './lib/Modal'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ModalBody_ } from './lib/ModalBody'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ModalFooter_ } from './lib/ModalFooter'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as ModalHeader_ } from './lib/ModalHeader'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Nav_ } from './lib/Nav'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Navbar_ } from './lib/Navbar'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as NavbarBrand_ } from './lib/NavbarBrand'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as NavbarToggler_ } from './lib/NavbarToggler'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as NavItem_ } from './lib/NavItem'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as NavLink_ } from './lib/NavLink'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Pagination_ } from './lib/Pagination'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as PaginationItem_ } from './lib/PaginationItem'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as PaginationLink_ } from './lib/PaginationLink'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Popover_ } from './lib/Popover'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as PopoverBody_ } from './lib/PopoverBody'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as PopoverHeader_ } from './lib/PopoverHeader'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Progress_ } from './lib/Progress'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Row_ } from './lib/Row'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as TabContent_ } from './lib/TabContent'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Table_ } from './lib/Table'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as TabPane_ } from './lib/TabPane'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Tag_ } from './lib/Tag'; /* tslint:disable-line: no-relative-import-in-test */
+import { default as Tooltip_ } from './lib/Tooltip'; /* tslint:disable-line: no-relative-import-in-test */
+import { UncontrolledAlert as UncontrolledAlert_ } from './lib/Uncontrolled'; /* tslint:disable-line: no-relative-import-in-test no-duplicate-imports */
+import { UncontrolledButtonDropdown as UncontrolledButtonDropdown_ } from './lib/Uncontrolled'; /* tslint:disable-line: no-relative-import-in-test no-duplicate-imports */
+import { UncontrolledDropdown as UncontrolledDropdown_ } from './lib/Uncontrolled'; /* tslint:disable-line: no-relative-import-in-test no-duplicate-imports */
+import { UncontrolledTooltip as UncontrolledTooltip_ } from './lib/Uncontrolled'; /* tslint:disable-line: no-relative-import-in-test no-duplicate-imports */
+import { UncontrolledCollapse as UncontrolledCollapse_ } from './lib/Uncontrolled'; /* tslint:disable-line: no-relative-import-in-test no-duplicate-imports */
+
+function AnyPropExample() {
+  return (
+    <React.Fragment >
+      <Alert_ foo={1} bar={false} foobar="example" />
+      <Badge_ foo={1} bar={false} foobar="example" />
+      <Breadcrumb_ foo={1} bar={false} foobar="example" />
+      <BreadcrumbItem_ foo={1} bar={false} foobar="example" />
+      <Button_ foo={1} bar={false} foobar="example" />
+      <ButtonDropdown_ foo={1} bar={false} foobar="example" />
+      <ButtonGroup_ foo={1} bar={false} foobar="example" />
+      <ButtonToolbar_ foo={1} bar={false} foobar="example" />
+      <Card_ foo={1} bar={false} foobar="example" />
+      <CardBody_ foo={1} bar={false} foobar="example" />
+      <CardColumns_ foo={1} bar={false} foobar="example" />
+      <CardDeck_ foo={1} bar={false} foobar="example" />
+      <CardFooter_ foo={1} bar={false} foobar="example" />
+      <CardGroup_ foo={1} bar={false} foobar="example" />
+      <CardHeader_ foo={1} bar={false} foobar="example" />
+      <CardImg_ foo={1} bar={false} foobar="example" />
+      <CardImgOverlay_ foo={1} bar={false} foobar="example" />
+      <CardLink_ foo={1} bar={false} foobar="example" />
+      <CardSubtitle_ foo={1} bar={false} foobar="example" />
+      <CardText_ foo={1} bar={false} foobar="example" />
+      <CardTitle_ foo={1} bar={false} foobar="example" />
+      <Carousel_ foo={1} bar={false} foobar="example" next={() => {}} previous={() => {}}/>
+      <CarouselItem_ foo={1} bar={false} foobar="example" />
+      <CarouselControl_ foo={1} bar={false} foobar="example" direction="next" onClickHandler={() => {}} directionText="" />
+      <CarouselIndicators_ foo={1} bar={false} foobar="example" items={[]} activeIndex={-1} onClickHandler={() => {}} />
+      <CarouselCaption_ foo={1} bar={false} foobar="example" captionText="" />
+      <Col_ foo={1} bar={false} foobar="example" />
+      <Collapse_ foo={1} bar={false} foobar="example" />
+      <Container_ foo={1} bar={false} foobar="example" />
+      <CustomInput_ foo={1} bar={false} foobar="example" type="file" />
+      <Dropdown_ foo={1} bar={false} foobar="example" />
+      <DropdownItem_ foo={1} bar={false} foobar="example" />
+      <DropdownMenu_ foo={1} bar={false} foobar="example" />
+      <DropdownToggle_ foo={1} bar={false} foobar="example" />
+      <Fade_ foo={1} bar={false} foobar="example" />
+      <Form_ foo={1} bar={false} foobar="example" />
+      <FormFeedback_ foo={1} bar={false} foobar="example" />
+      <FormGroup_ foo={1} bar={false} foobar="example" />
+      <FormText_ foo={1} bar={false} foobar="example" />
+      <Input_ foo={1} bar={false} foobar="example" />
+      <InputGroup_ foo={1} bar={false} foobar="example" />
+      <InputGroupAddon_ foo={1} bar={false} foobar="example" addonType="prepend" />
+      <InputGroupButtonDropdown_ foo={1} bar={false} foobar="example" addonType="prepend" />
+      <InputGroupText_ foo={1} bar={false} foobar="example" />
+      <Jumbotron_ foo={1} bar={false} foobar="example" />
+      <Label_ foo={1} bar={false} foobar="example" />
+      <ListGroup_ foo={1} bar={false} foobar="example" />
+      <ListGroupItem_ foo={1} bar={false} foobar="example" />
+      <ListGroupItemHeading_ foo={1} bar={false} foobar="example" />
+      <ListGroupItemText_ foo={1} bar={false} foobar="example" />
+      <Media_ foo={1} bar={false} foobar="example" />
+      <Modal_ foo={1} bar={false} foobar="example" />
+      <ModalBody_ foo={1} bar={false} foobar="example" />
+      <ModalFooter_ foo={1} bar={false} foobar="example" />
+      <ModalHeader_ foo={1} bar={false} foobar="example" />
+      <Nav_ foo={1} bar={false} foobar="example" />
+      <Navbar_ foo={1} bar={false} foobar="example" />
+      <NavbarBrand_ foo={1} bar={false} foobar="example" />
+      <NavbarToggler_ foo={1} bar={false} foobar="example" />
+      <NavItem_ foo={1} bar={false} foobar="example" />
+      <NavLink_ foo={1} bar={false} foobar="example" />
+      <Pagination_ foo={1} bar={false} foobar="example" />
+      <PaginationItem_ foo={1} bar={false} foobar="example" />
+      <PaginationLink_ foo={1} bar={false} foobar="example" />
+      <Popover_ foo={1} bar={false} foobar="example" target="" />
+      <PopoverBody_ foo={1} bar={false} foobar="example" />
+      <PopoverHeader_ foo={1} bar={false} foobar="example" />
+      <Progress_ foo={1} bar={false} foobar="example" />
+      <Row_ foo={1} bar={false} foobar="example" />
+      <TabContent_ foo={1} bar={false} foobar="example" />
+      <Table_ foo={1} bar={false} foobar="example" />
+      <TabPane_ foo={1} bar={false} foobar="example" />
+      <Tag_ foo={1} bar={false} foobar="example" />
+      <Tooltip_ foo={1} bar={false} foobar="example" target="" />
+      <UncontrolledAlert_ foo={1} bar={false} foobar="example" />
+      <UncontrolledButtonDropdown_ foo={1} bar={false} foobar="example" />
+      <UncontrolledDropdown_ foo={1} bar={false} foobar="example" />
+      <UncontrolledTooltip_ foo={1} bar={false} foobar="example" target="" />
+      <UncontrolledCollapse_ foo={1} bar={false} foobar="example" target="" />
+    </React.Fragment >
+  );
+}
+
+interface GenericInterface {
+  foo: number;
+  bar: boolean;
+  foobar?: string;
+}
+class AlertGeneric extends Alert<GenericInterface> {}
+class BadgeGeneric extends Badge<GenericInterface> {}
+class BreadcrumbGeneric extends Breadcrumb<GenericInterface> {}
+class BreadcrumbItemGeneric extends BreadcrumbItem<GenericInterface> {}
+class ButtonGeneric extends Button<GenericInterface> {}
+class ButtonDropdownGeneric extends ButtonDropdown<GenericInterface> {}
+class ButtonGroupGeneric extends ButtonGroup<GenericInterface> {}
+class ButtonToolbarGeneric extends ButtonToolbar<GenericInterface> {}
+class CardGeneric extends Card<GenericInterface> {}
+class CardBodyGeneric extends CardBody<GenericInterface> {}
+class CardColumnsGeneric extends CardColumns<GenericInterface> {}
+class CardDeckGeneric extends CardDeck<GenericInterface> {}
+class CardFooterGeneric extends CardFooter<GenericInterface> {}
+class CardGroupGeneric extends CardGroup<GenericInterface> {}
+class CardHeaderGeneric extends CardHeader<GenericInterface> {}
+class CardImgGeneric extends CardImg<GenericInterface> {}
+class CardImgOverlayGeneric extends CardImgOverlay<GenericInterface> {}
+class CardLinkGeneric extends CardLink<GenericInterface> {}
+class CardSubtitleGeneric extends CardSubtitle<GenericInterface> {}
+class CardTextGeneric extends CardText<GenericInterface> {}
+class CardTitleGeneric extends CardTitle<GenericInterface> {}
+class CarouselGeneric extends Carousel<GenericInterface> {}
+class CarouselItemGeneric extends CarouselItem<GenericInterface> {}
+class CarouselControlGeneric extends CarouselControl<GenericInterface> {}
+class CarouselIndicatorsGeneric extends CarouselIndicators<GenericInterface> {}
+class CarouselCaptionGeneric extends CarouselCaption<GenericInterface> {}
+class ColGeneric extends Col<GenericInterface> {}
+class CollapseGeneric extends Collapse<GenericInterface> {}
+class ContainerGeneric extends Container<GenericInterface> {}
+class CustomInputGeneric extends CustomInput<GenericInterface> {}
+class DropdownGeneric extends Dropdown<GenericInterface> {}
+class DropdownItemGeneric extends DropdownItem<GenericInterface> {}
+class DropdownMenuGeneric extends DropdownMenu<GenericInterface> {}
+class DropdownToggleGeneric extends DropdownToggle<GenericInterface> {}
+class FadeGeneric extends Fade<GenericInterface> {}
+class FormGeneric extends Form<GenericInterface> {}
+class FormFeedbackGeneric extends FormFeedback<GenericInterface> {}
+class FormGroupGeneric extends FormGroup<GenericInterface> {}
+class FormTextGeneric extends FormText<GenericInterface> {}
+class InputGeneric extends Input<GenericInterface> {}
+class InputGroupGeneric extends InputGroup<GenericInterface> {}
+class InputGroupAddonGeneric extends InputGroupAddon<GenericInterface> {}
+class InputGroupButtonDropdownGeneric extends InputGroupButtonDropdown<GenericInterface> {}
+class InputGroupTextGeneric extends InputGroupText<GenericInterface> {}
+class JumbotronGeneric extends Jumbotron<GenericInterface> {}
+class LabelGeneric extends Label<GenericInterface> {}
+class ListGroupGeneric extends ListGroup<GenericInterface> {}
+class ListGroupItemGeneric extends ListGroupItem<GenericInterface> {}
+class ListGroupItemHeadingGeneric extends ListGroupItemHeading<GenericInterface> {}
+class ListGroupItemTextGeneric extends ListGroupItemText<GenericInterface> {}
+class MediaGeneric extends Media<GenericInterface> {}
+class ModalGeneric extends Modal<GenericInterface> {}
+class ModalBodyGeneric extends ModalBody<GenericInterface> {}
+class ModalFooterGeneric extends ModalFooter<GenericInterface> {}
+class ModalHeaderGeneric extends ModalHeader<GenericInterface> {}
+class NavGeneric extends Nav<GenericInterface> {}
+class NavbarGeneric extends Navbar<GenericInterface> {}
+class NavbarBrandGeneric extends NavbarBrand<GenericInterface> {}
+class NavbarTogglerGeneric extends NavbarToggler<GenericInterface> {}
+class NavItemGeneric extends NavItem<GenericInterface> {}
+class NavLinkGeneric extends NavLink<GenericInterface> {}
+class PaginationGeneric extends Pagination<GenericInterface> {}
+class PaginationItemGeneric extends PaginationItem<GenericInterface> {}
+class PaginationLinkGeneric extends PaginationLink<GenericInterface> {}
+class PopoverGeneric extends Popover<GenericInterface> {}
+class PopoverBodyGeneric extends PopoverBody<GenericInterface> {}
+class PopoverHeaderGeneric extends PopoverHeader<GenericInterface> {}
+class ProgressGeneric extends Progress<GenericInterface> {}
+class RowGeneric extends Row<GenericInterface> {}
+class TabContentGeneric extends TabContent<GenericInterface> {}
+class TableGeneric extends Table<GenericInterface> {}
+class TabPaneGeneric extends TabPane<GenericInterface> {}
+class TagGeneric extends Tag<GenericInterface> {}
+class TooltipGeneric extends Tooltip<GenericInterface> {}
+class UncontrolledAlertGeneric extends UncontrolledAlert<GenericInterface> {}
+class UncontrolledButtonDropdownGeneric extends UncontrolledButtonDropdown<GenericInterface> {}
+class UncontrolledDropdownGeneric extends UncontrolledDropdown<GenericInterface> {}
+class UncontrolledTooltipGeneric extends UncontrolledTooltip<GenericInterface> {}
+class UncontrolledCollapseGeneric extends UncontrolledCollapse<GenericInterface> {}
+
+function GenericPropExample() {
+  return (
+    <React.Fragment >
+      <AlertGeneric foo={1} bar={false} foobar="example" />
+      <BadgeGeneric foo={1} bar={false} foobar="example" />
+      <BreadcrumbGeneric foo={1} bar={false} foobar="example" />
+      <BreadcrumbItemGeneric foo={1} bar={false} foobar="example" />
+      <ButtonGeneric foo={1} bar={false} foobar="example" />
+      <ButtonDropdownGeneric foo={1} bar={false} foobar="example" />
+      <ButtonGroupGeneric foo={1} bar={false} foobar="example" />
+      <ButtonToolbarGeneric foo={1} bar={false} foobar="example" />
+      <CardGeneric foo={1} bar={false} foobar="example" />
+      <CardBodyGeneric foo={1} bar={false} foobar="example" />
+      <CardColumnsGeneric foo={1} bar={false} foobar="example" />
+      <CardDeckGeneric foo={1} bar={false} foobar="example" />
+      <CardFooterGeneric foo={1} bar={false} foobar="example" />
+      <CardGroupGeneric foo={1} bar={false} foobar="example" />
+      <CardHeaderGeneric foo={1} bar={false} foobar="example" />
+      <CardImgGeneric foo={1} bar={false} foobar="example" />
+      <CardImgOverlayGeneric foo={1} bar={false} foobar="example" />
+      <CardLinkGeneric foo={1} bar={false} foobar="example" />
+      <CardSubtitleGeneric foo={1} bar={false} foobar="example" />
+      <CardTextGeneric foo={1} bar={false} foobar="example" />
+      <CardTitleGeneric foo={1} bar={false} foobar="example" />
+      <CarouselGeneric foo={1} bar={false} foobar="example" next={() => {}} previous={() => {}}/>
+      <CarouselItemGeneric foo={1} bar={false} foobar="example" />
+      <CarouselControlGeneric foo={1} bar={false} foobar="example" direction="next" onClickHandler={() => {}} directionText="" />
+      <CarouselIndicatorsGeneric foo={1} bar={false} foobar="example" items={[]} activeIndex={-1} onClickHandler={() => {}} />
+      <CarouselCaptionGeneric foo={1} bar={false} foobar="example" captionText="" />
+      <ColGeneric foo={1} bar={false} foobar="example" />
+      <CollapseGeneric foo={1} bar={false} foobar="example" />
+      <ContainerGeneric foo={1} bar={false} foobar="example" />
+      <CustomInputGeneric foo={1} bar={false} foobar="example" type="file" />
+      <DropdownGeneric foo={1} bar={false} foobar="example" />
+      <DropdownItemGeneric foo={1} bar={false} foobar="example" />
+      <DropdownMenuGeneric foo={1} bar={false} foobar="example" />
+      <DropdownToggleGeneric foo={1} bar={false} foobar="example" />
+      <FadeGeneric foo={1} bar={false} foobar="example" />
+      <FormGeneric foo={1} bar={false} foobar="example" />
+      <FormFeedbackGeneric foo={1} bar={false} foobar="example" />
+      <FormGroupGeneric foo={1} bar={false} foobar="example" />
+      <FormTextGeneric foo={1} bar={false} foobar="example" />
+      <InputGeneric foo={1} bar={false} foobar="example" />
+      <InputGroupGeneric foo={1} bar={false} foobar="example" />
+      <InputGroupAddonGeneric foo={1} bar={false} foobar="example" addonType="prepend" />
+      <InputGroupButtonDropdownGeneric foo={1} bar={false} foobar="example" addonType="prepend" />
+      <InputGroupTextGeneric foo={1} bar={false} foobar="example" />
+      <JumbotronGeneric foo={1} bar={false} foobar="example" />
+      <LabelGeneric foo={1} bar={false} foobar="example" />
+      <ListGroupGeneric foo={1} bar={false} foobar="example" />
+      <ListGroupItemGeneric foo={1} bar={false} foobar="example" />
+      <ListGroupItemHeadingGeneric foo={1} bar={false} foobar="example" />
+      <ListGroupItemTextGeneric foo={1} bar={false} foobar="example" />
+      <MediaGeneric foo={1} bar={false} foobar="example" />
+      <ModalGeneric foo={1} bar={false} foobar="example" />
+      <ModalBodyGeneric foo={1} bar={false} foobar="example" />
+      <ModalFooterGeneric foo={1} bar={false} foobar="example" />
+      <ModalHeaderGeneric foo={1} bar={false} foobar="example" />
+      <NavGeneric foo={1} bar={false} foobar="example" />
+      <NavbarGeneric foo={1} bar={false} foobar="example" />
+      <NavbarBrandGeneric foo={1} bar={false} foobar="example" />
+      <NavbarTogglerGeneric foo={1} bar={false} foobar="example" />
+      <NavItemGeneric foo={1} bar={false} foobar="example" />
+      <NavLinkGeneric foo={1} bar={false} foobar="example" />
+      <PaginationGeneric foo={1} bar={false} foobar="example" />
+      <PaginationItemGeneric foo={1} bar={false} foobar="example" />
+      <PaginationLinkGeneric foo={1} bar={false} foobar="example" />
+      <PopoverGeneric foo={1} bar={false} foobar="example" target="" />
+      <PopoverBodyGeneric foo={1} bar={false} foobar="example" />
+      <PopoverHeaderGeneric foo={1} bar={false} foobar="example" />
+      <ProgressGeneric foo={1} bar={false} foobar="example" />
+      <RowGeneric foo={1} bar={false} foobar="example" />
+      <TabContentGeneric foo={1} bar={false} foobar="example" />
+      <TableGeneric foo={1} bar={false} foobar="example" />
+      <TabPaneGeneric foo={1} bar={false} foobar="example" />
+      <TagGeneric foo={1} bar={false} foobar="example" />
+      <TooltipGeneric foo={1} bar={false} foobar="example" target="" />
+      <UncontrolledAlertGeneric foo={1} bar={false} foobar="example" />
+      <UncontrolledButtonDropdownGeneric foo={1} bar={false} foobar="example" />
+      <UncontrolledDropdownGeneric foo={1} bar={false} foobar="example" />
+      <UncontrolledTooltipGeneric foo={1} bar={false} foobar="example" target="" />
+      <UncontrolledCollapseGeneric foo={1} bar={false} foobar="example" target="" />
+    </React.Fragment >
+  );
+}
+
+class Example119 extends React.Component<any, any> {
+  render() {
+    return (
+      <Form>
+        <FormGroup>
+          <Label for="exampleCheckbox">Checkboxes</Label>
+          <div>
+            <CustomInput type="checkbox" id="exampleCustomCheckbox" label="Check this custom checkbox" />
+            <CustomInput type="checkbox" id="exampleCustomCheckbox2" label="Or this one" />
+            <CustomInput type="checkbox" id="exampleCustomCheckbox3" label={<span>Or this one</span>} />
+            <CustomInput type="checkbox" id="exampleCustomCheckbox4" label="But not this disabled one" disabled />
+          </div>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCheckbox">Radios</Label>
+          <div>
+            <CustomInput type="radio" id="exampleCustomRadio" name="customRadio" label="Select this custom radio" />
+            <CustomInput type="radio" id="exampleCustomRadio2" name="customRadio" label="Or this one" />
+            <CustomInput type="radio" id="exampleCustomRadio3" name="customRadio" label={<span>Or this one</span>} />
+            <CustomInput type="radio" id="exampleCustomRadio4" label="But not this disabled one" disabled />
+          </div>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCheckbox">Inline</Label>
+          <div>
+            <CustomInput type="checkbox" id="exampleCustomInline" label="An inline custom input" inline />
+            <CustomInput type="checkbox" id="exampleCustomInline2" label="and another one" inline />
+            <CustomInput type="checkbox" id="exampleCustomInline3" label={<span>and this one</span>} inline />
+          </div>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCustomSelect">Custom Select</Label>
+          <CustomInput type="select" id="exampleCustomSelect" name="customSelect">
+            <option value="">Select</option>
+            <option>Value 1</option>
+            <option>Value 2</option>
+            <option>Value 3</option>
+            <option>Value 4</option>
+            <option>Value 5</option>
+          </CustomInput>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCustomMutlipleSelect">Custom Multiple Select</Label>
+          <CustomInput type="select" id="exampleCustomMutlipleSelect" name="customSelect" multiple>
+            <option value="">Select</option>
+            <option>Value 1</option>
+            <option>Value 2</option>
+            <option>Value 3</option>
+            <option>Value 4</option>
+            <option>Value 5</option>
+          </CustomInput>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCustomSelectDisabled">Custom Select Disabled</Label>
+          <CustomInput type="select" id="exampleCustomSelectDisabled" name="customSelect" disabled>
+            <option value="">Select</option>
+            <option>Value 1</option>
+            <option>Value 2</option>
+            <option>Value 3</option>
+            <option>Value 4</option>
+            <option>Value 5</option>
+          </CustomInput>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCustomMutlipleSelectDisabled">Custom Multiple Select Disabled</Label>
+          <CustomInput type="select" id="exampleCustomMutlipleSelectDisabled" name="customSelect" multiple disabled>
+            <option value="">Select</option>
+            <option>Value 1</option>
+            <option>Value 2</option>
+            <option>Value 3</option>
+            <option>Value 4</option>
+            <option>Value 5</option>
+          </CustomInput>
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCustomFileBrowser">File Browser</Label>
+          <CustomInput type="file" id="exampleCustomFileBrowser" name="customFile" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCustomFileBrowser">File Browser with Custom Label</Label>
+          <CustomInput type="file" id="exampleCustomFileBrowser" name="customFile" label="Yo, pick a file!" />
+          <CustomInput type="file" id="exampleCustomFileBrowser1" name="customFile" label={<span>Yo, pick a file!</span>} />
+        </FormGroup>
+        <FormGroup>
+          <Label for="exampleCustomFileBrowser">File Browser Disabled</Label>
+          <CustomInput type="file" id="exampleCustomFileBrowser" name="customFile" disabled />
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+
+class Example120 extends React.Component<any, any> {
+  render() {
+    return (
+      <Table borderless>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+class Example121 extends React.Component<any, any> {
+  render() {
+    return (
+      <UncontrolledDropdown className="some-class" setActiveFromChild>
+        <DropdownToggle caret>
+          Dropdown
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem header>Header</DropdownItem>
+          <DropdownItem disabled>Action</DropdownItem>
+          <DropdownItem>Another Action</DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem>Another Action</DropdownItem>
+        </DropdownMenu>
+      </UncontrolledDropdown>
+    );
+  }
+}
+
+class Example122 extends React.Component<any, any> {
+  state: any;
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+        <DropdownToggle caret>
+          Dropdown
+        </DropdownToggle>
+        <DropdownMenu persist>
+          <DropdownItem header>Header</DropdownItem>
+          <DropdownItem disabled>Action</DropdownItem>
+          <DropdownItem>Another Action</DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem>Another Action</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+function Example123() {
+  return(
+    <div>
+      <Button color="primary" id="toggler" style={{ marginBottom: '1rem' }}>
+        Toggle
+      </Button>
+      <UncontrolledCollapse toggler="#toggler">
+        <Card>
+          <CardBody>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt magni, voluptas debitis
+            similique porro a molestias consequuntur earum odio officiis natus, amet hic, iste sed
+            dignissimos esse fuga! Minus, alias.
+          </CardBody>
+        </Card>
+      </UncontrolledCollapse>
+    </div>
+  );
+}
+
+function Example124()  {
+  // https://reactstrap.github.io/components/carousel/
+  const items = [
+    {
+      src: 'data:image/svg+xml...',
+      altText: 'Slide 1',
+      caption: 'Slide 1'
+    },
+    {
+      src: 'data:image/svg+xml...',
+      altText: 'Slide 2',
+      caption: 'Slide 2'
+    },
+    {
+      src: 'data:image/svg+xml...',
+      altText: 'Slide 3',
+      caption: 'Slide 3'
+    }
+  ];
+
+  return (
+    <UncontrolledCarousel items={items} />
+  );
+}
+
+function Example125() {
+  return (
+    <div>
+      <Spinner />
+      <Spinner color="primary" />
+      <Spinner size="sm" />
+      <Spinner type="grow" />
+      <Spinner color="success" size="sm" type="grow" />
+      <Spinner className="customClass" />
+    </div>
+  );
+}
+
+function Example126() {
+    return (
+        <div>
+            <UncontrolledPopover placement="bottom" target="UncontrolledPopover">
+                <PopoverHeader>Popover Title</PopoverHeader>
+                <PopoverBody>Lorem ipsum dolor sit amet</PopoverBody>
+            </UncontrolledPopover>
+            <UncontrolledPopover defaultOpen={true} placement="bottom" target="UncontrolledPopover">
+                <PopoverHeader>Popover Title</PopoverHeader>
+                <PopoverBody>Lorem ipsum dolor sit amet</PopoverBody>
+            </UncontrolledPopover>
+        </div>
+    );
+}
diff --git a/types/reactstrap/v7/tsconfig.json b/types/reactstrap/v7/tsconfig.json
new file mode 100644
index 0000000000..eab2583792
--- /dev/null
+++ b/types/reactstrap/v7/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "jsx": "react",
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "reactstrap-tests.tsx"
+    ]
+}
\ No newline at end of file
diff --git a/types/reactstrap/v7/tslint.json b/types/reactstrap/v7/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/reactstrap/v7/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }