diff --git a/src/Accordion.js b/src/Accordion.js
index 6ae41d6a3..3b6f93050 100644
--- a/src/Accordion.js
+++ b/src/Accordion.js
@@ -62,4 +62,4 @@ function Accordion(props) {
 Accordion.propTypes = propTypes;
 Accordion.defaultProps = defaultProps;
 
-export default Accordion;
+export default React.forwardRef((props, ref) => <Accordion innerRef={ref} {...props} />);
diff --git a/src/AccordionBody.js b/src/AccordionBody.js
index 777f96309..51677e3f1 100644
--- a/src/AccordionBody.js
+++ b/src/AccordionBody.js
@@ -32,7 +32,7 @@ function AccordionBody(props) {
     className,
     cssModule,
     tag: Tag,
-    innerRef,
+    innerRef = ref,
     children,
     accordionId,
     ...attributes
@@ -62,4 +62,4 @@ function AccordionBody(props) {
 AccordionBody.propTypes = propTypes;
 AccordionBody.defaultProps = defaultProps;
 
-export default AccordionBody;
+export default React.forwardRef((props, ref) => <AccordionBody innerRef={ref} {...props} />);
diff --git a/src/AccordionHeader.js b/src/AccordionHeader.js
index 485b0d50b..0556c48f7 100644
--- a/src/AccordionHeader.js
+++ b/src/AccordionHeader.js
@@ -67,4 +67,4 @@ function AccordionHeader(props) {
 AccordionHeader.propTypes = propTypes;
 AccordionHeader.defaultProps = defaultProps;
 
-export default AccordionHeader;
+export default React.forwardRef((props, ref) => <AccordionHeader innerRef={ref} {...props} />);
diff --git a/src/AccordionItem.js b/src/AccordionItem.js
index 1ac0805df..fa47e5516 100644
--- a/src/AccordionItem.js
+++ b/src/AccordionItem.js
@@ -35,4 +35,4 @@ function AccordionItem(props) {
 AccordionItem.propTypes = propTypes;
 AccordionItem.defaultProps = defaultProps;
 
-export default AccordionItem;
+export default React.forwardRef((props, ref) => <AccordionItem innerRef={ref} {...props} />);
diff --git a/src/Alert.js b/src/Alert.js
index d1d8ced24..8514f8fd6 100644
--- a/src/Alert.js
+++ b/src/Alert.js
@@ -59,7 +59,7 @@ function Alert(props) {
     children,
     transition,
     fade,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
 
@@ -108,4 +108,4 @@ function Alert(props) {
 Alert.propTypes = propTypes;
 Alert.defaultProps = defaultProps;
 
-export default Alert;
+export default React.forwardRef((props, ref) => <Alert innerRef={ref} {...props} />);
diff --git a/src/Badge.js b/src/Badge.js
index 8aaa9a57d..9af580b17 100644
--- a/src/Badge.js
+++ b/src/Badge.js
@@ -60,4 +60,4 @@ function Badge(props) {
 Badge.propTypes = propTypes;
 Badge.defaultProps = defaultProps;
 
-export default Badge;
+export default React.forwardRef((props, ref) => <Badge innerRef={ref} {...props} />);
diff --git a/src/Button.js b/src/Button.js
index 516ce042d..53a107421 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -109,4 +109,4 @@ function Button(props) {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default Button;
+export default React.forwardRef((props, ref) => <Button innerRef={ref} {...props} />);
diff --git a/src/Card.js b/src/Card.js
index e21904d7a..2b7ca7e02 100644
--- a/src/Card.js
+++ b/src/Card.js
@@ -58,4 +58,4 @@ function Card(props) {
 Card.propTypes = propTypes;
 Card.defaultProps = defaultProps;
 
-export default Card;
+export default React.forwardRef((props, ref) => <Card innerRef={ref} {...props} />);
diff --git a/src/CardBody.js b/src/CardBody.js
index 2b6e29465..72f934e40 100644
--- a/src/CardBody.js
+++ b/src/CardBody.js
@@ -34,4 +34,4 @@ function CardBody(props) {
 CardBody.propTypes = propTypes;
 CardBody.defaultProps = defaultProps;
 
-export default CardBody;
+export default React.forwardRef((props, ref) => <CardBody innerRef={ref} {...props} />);
diff --git a/src/CardLink.js b/src/CardLink.js
index 694fa127b..502357d1e 100644
--- a/src/CardLink.js
+++ b/src/CardLink.js
@@ -31,4 +31,4 @@ function CardLink(props) {
 CardLink.propTypes = propTypes;
 CardLink.defaultProps = defaultProps;
 
-export default CardLink;
+export default React.forwardRef((props, ref) => <CardLink innerRef={ref} {...props} />);
diff --git a/src/CloseButton.js b/src/CloseButton.js
index c2104287a..3729ee066 100644
--- a/src/CloseButton.js
+++ b/src/CloseButton.js
@@ -40,4 +40,4 @@ function CloseButton(props) {
 CloseButton.propTypes = propTypes;
 CloseButton.defaultProps = defaultProps;
 
-export default CloseButton;
+export default React.forwardRef((props, ref) => <CloseButton innerRef={ref} {...props} />);
diff --git a/src/Collapse.js b/src/Collapse.js
index e0755783d..4557390db 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -172,4 +172,4 @@ class Collapse extends Component {
 
 Collapse.propTypes = propTypes;
 Collapse.defaultProps = defaultProps;
-export default Collapse;
+export default React.forwardRef((props, ref) => <Collapse innerRef={ref} {...props} />);
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 642f7ea95..bfccfcb05 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -371,4 +371,4 @@ Dropdown.propTypes = propTypes;
 Dropdown.defaultProps = defaultProps;
 Dropdown.contextType = InputGroupContext;
 
-export default Dropdown;
+export default React.forwardRef((props, ref) => <Dropdown innerRef={ref} {...props} />);
diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
index 1f552f5ea..f7b8ed7e9 100644
--- a/src/DropdownToggle.js
+++ b/src/DropdownToggle.js
@@ -143,4 +143,4 @@ DropdownToggle.propTypes = propTypes;
 DropdownToggle.defaultProps = defaultProps;
 DropdownToggle.contextType = DropdownContext;
 
-export default DropdownToggle;
+export default React.forwardRef((props, ref) => <DropdownToggle innerRef={ref} {...props} />);
diff --git a/src/Fade.js b/src/Fade.js
index bd6574a30..131acf0f5 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -77,4 +77,4 @@ function Fade(props) {
 Fade.propTypes = propTypes;
 Fade.defaultProps = defaultProps;
 
-export default Fade;
+export default React.forwardRef((props, ref) => <Fade innerRef={ref} {...props} />);
diff --git a/src/Form.js b/src/Form.js
index b83927d82..c7b933af5 100644
--- a/src/Form.js
+++ b/src/Form.js
@@ -54,4 +54,4 @@ class Form extends Component {
 Form.propTypes = propTypes;
 Form.defaultProps = defaultProps;
 
-export default Form;
+export default React.forwardRef((props, ref) => <Form innerRef={ref} {...props} />);
diff --git a/src/Input.js b/src/Input.js
index 8aaf48bb6..4cdf3256f 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -144,4 +144,4 @@ class Input extends React.Component {
 Input.propTypes = propTypes;
 Input.defaultProps = defaultProps;
 
-export default Input;
+export default React.forwardRef((props, ref) => <Input innerRef={ref} {...props} />);
diff --git a/src/Modal.js b/src/Modal.js
index 1b485520a..3fb527d18 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -574,4 +574,4 @@ Modal.defaultProps = defaultProps;
 Modal.openCount = 0;
 Modal.originalBodyOverflow = null;
 
-export default Modal;
+export default React.forwardRef((props, ref) => <Modal innerRef={ref} {...props} />);
diff --git a/src/NavLink.js b/src/NavLink.js
index bb44c32f4..949648e98 100644
--- a/src/NavLink.js
+++ b/src/NavLink.js
@@ -82,4 +82,4 @@ class NavLink extends React.Component {
 NavLink.propTypes = propTypes;
 NavLink.defaultProps = defaultProps;
 
-export default NavLink;
+export default React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />);
diff --git a/src/Offcanvas.js b/src/Offcanvas.js
index cce2ffea1..1e4d15ba9 100644
--- a/src/Offcanvas.js
+++ b/src/Offcanvas.js
@@ -468,4 +468,4 @@ Offcanvas.propTypes = propTypes;
 Offcanvas.defaultProps = defaultProps;
 Offcanvas.openCount = 0;
 
-export default Offcanvas;
+export default React.forwardRef((props, ref) => <Offcanvas innerRef={ref} {...props} />);
diff --git a/src/Placeholder.js b/src/Placeholder.js
index 226b66b6c..1e1ffe08d 100644
--- a/src/Placeholder.js
+++ b/src/Placeholder.js
@@ -61,4 +61,4 @@ function Placeholder(props) {
 Placeholder.propTypes = propTypes;
 Placeholder.defaultProps = defaultProps;
 
-export default Placeholder;
+export default React.forwardRef((props, ref) => <Placeholder innerRef={ref} {...props} />);
diff --git a/src/Table.js b/src/Table.js
index 14cfbb86c..b89500675 100644
--- a/src/Table.js
+++ b/src/Table.js
@@ -50,7 +50,7 @@ function Table(props) {
     responsive,
     tag: Tag,
     responsiveTag: ResponsiveTag,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
 
@@ -89,4 +89,4 @@ function Table(props) {
 Table.propTypes = propTypes;
 Table.defaultProps = defaultProps;
 
-export default Table;
+export default React.forwardRef((props, ref) => <Table innerRef={ref} {...props} />);
diff --git a/src/Toast.js b/src/Toast.js
index afd2a2ad8..26f63304c 100644
--- a/src/Toast.js
+++ b/src/Toast.js
@@ -69,4 +69,4 @@ function Toast(props) {
 Toast.propTypes = propTypes;
 Toast.defaultProps = defaultProps;
 
-export default Toast;
+export default React.forwardRef((props, ref) => <Toast innerRef={ref} {...props} />);
diff --git a/src/ToastBody.js b/src/ToastBody.js
index 86efbc5f1..776cc1b90 100644
--- a/src/ToastBody.js
+++ b/src/ToastBody.js
@@ -31,4 +31,4 @@ function ToastBody(props) {
 ToastBody.propTypes = propTypes;
 ToastBody.defaultProps = defaultProps;
 
-export default ToastBody;
+export default React.forwardRef((props, ref) => <ToastBody innerRef={ref} {...props} />);
diff --git a/src/TooltipPopoverWrapper.js b/src/TooltipPopoverWrapper.js
index a05b4c026..af684e8ae 100644
--- a/src/TooltipPopoverWrapper.js
+++ b/src/TooltipPopoverWrapper.js
@@ -400,4 +400,4 @@ class TooltipPopoverWrapper extends React.Component {
 TooltipPopoverWrapper.propTypes = propTypes;
 TooltipPopoverWrapper.defaultProps = defaultProps;
 
-export default TooltipPopoverWrapper;
+export default React.forwardRef((props, ref) => <TooltipPopoverWrapper innerRef={ref} {...props} />);
diff --git a/src/UncontrolledAccordion.js b/src/UncontrolledAccordion.js
index 591612485..611e16cb9 100644
--- a/src/UncontrolledAccordion.js
+++ b/src/UncontrolledAccordion.js
@@ -43,4 +43,4 @@ function UncontrolledAccordion({ defaultOpen, stayOpen, ...props }) {
 UncontrolledAccordion.propTypes = propTypes;
 UncontrolledAccordion.defaultProps = defaultProps;
 
-export default UncontrolledAccordion;
+export default React.forwardRef((props, ref) => <UncontrolledAccordion innerRef={ref} {...props} />);
diff --git a/types/lib/Accordion.d.ts b/types/lib/Accordion.d.ts
index 2906ef741..73522a191 100644
--- a/types/lib/Accordion.d.ts
+++ b/types/lib/Accordion.d.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { CSSModule } from './utils';
-
 export interface AccordionProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   cssModule?: CSSModule;
   flush?: boolean;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   open: string | string[];
 }
diff --git a/types/lib/AccordionBody.d.ts b/types/lib/AccordionBody.d.ts
index bad2b326d..e48241f62 100644
--- a/types/lib/AccordionBody.d.ts
+++ b/types/lib/AccordionBody.d.ts
@@ -4,6 +4,7 @@ import { CSSModule } from './utils';
 export interface AccordionBodyProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   accordionId: string;
 }
diff --git a/types/lib/AccordionHeader.d.ts b/types/lib/AccordionHeader.d.ts
index d390a5fd4..5373a4585 100644
--- a/types/lib/AccordionHeader.d.ts
+++ b/types/lib/AccordionHeader.d.ts
@@ -4,6 +4,7 @@ import { CSSModule } from './utils';
 export interface AccordionHeaderProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   targetId: string;
 }
diff --git a/types/lib/AccordionItem.d.ts b/types/lib/AccordionItem.d.ts
index 874970943..bdb33e43a 100644
--- a/types/lib/AccordionItem.d.ts
+++ b/types/lib/AccordionItem.d.ts
@@ -4,6 +4,7 @@ import { CSSModule } from './utils';
 export interface AccordionItemProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 
diff --git a/types/lib/Alert.d.ts b/types/lib/Alert.d.ts
index 6840dcd18..f31649aa2 100644
--- a/types/lib/Alert.d.ts
+++ b/types/lib/Alert.d.ts
@@ -12,6 +12,7 @@ export interface UncontrolledAlertProps
   fade?: boolean;
   tag?: React.ElementType;
   transition?: FadeProps;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 export interface AlertProps extends UncontrolledAlertProps {
diff --git a/types/lib/Badge.d.ts b/types/lib/Badge.d.ts
index f74ea4399..65396c26c 100644
--- a/types/lib/Badge.d.ts
+++ b/types/lib/Badge.d.ts
@@ -6,6 +6,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
   color?: string;
   pill?: boolean;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   cssModule?: CSSModule;
 }
diff --git a/types/lib/Button.d.ts b/types/lib/Button.d.ts
index 0bdfd594e..737508e57 100644
--- a/types/lib/Button.d.ts
+++ b/types/lib/Button.d.ts
@@ -9,6 +9,7 @@ export interface ButtonProps
   block?: boolean;
   color?: string;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLButtonElement>;
   size?: string;
   cssModule?: CSSModule;
diff --git a/types/lib/Card.d.ts b/types/lib/Card.d.ts
index 76587356d..ae8ba0ac6 100644
--- a/types/lib/Card.d.ts
+++ b/types/lib/Card.d.ts
@@ -9,6 +9,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLElement> {
   body?: boolean;
   outline?: boolean;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 
diff --git a/types/lib/CardBody.d.ts b/types/lib/CardBody.d.ts
index cbd026c1a..820e197fd 100644
--- a/types/lib/CardBody.d.ts
+++ b/types/lib/CardBody.d.ts
@@ -5,6 +5,7 @@ export interface CardBodyProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 
diff --git a/types/lib/CardLink.d.ts b/types/lib/CardLink.d.ts
index b36805143..8b45b0d69 100644
--- a/types/lib/CardLink.d.ts
+++ b/types/lib/CardLink.d.ts
@@ -5,6 +5,7 @@ export interface CardLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   [key: string]: any;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLAnchorElement>;
   cssModule?: CSSModule;
 }
diff --git a/types/lib/Collapse.d.ts b/types/lib/Collapse.d.ts
index ca5f73eb8..ca067d8c9 100644
--- a/types/lib/Collapse.d.ts
+++ b/types/lib/Collapse.d.ts
@@ -19,6 +19,7 @@ export interface CollapseProps extends React.HTMLAttributes<HTMLElement> {
   onExit?: () => void;
   onExiting?: () => void;
   onExited?: () => void;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 
diff --git a/types/lib/Fade.d.ts b/types/lib/Fade.d.ts
index 39a12ee91..9225de6a5 100644
--- a/types/lib/Fade.d.ts
+++ b/types/lib/Fade.d.ts
@@ -16,6 +16,7 @@ export interface FadeProps extends React.HTMLAttributes<HTMLElement> {
   transitionLeave?: boolean;
   onLeave?: () => void;
   onEnter?: () => void;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 
diff --git a/types/lib/Form.d.ts b/types/lib/Form.d.ts
index 78b2e15cd..77e14731c 100644
--- a/types/lib/Form.d.ts
+++ b/types/lib/Form.d.ts
@@ -4,6 +4,7 @@ import { CSSModule } from './utils';
 export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   [key: string]: any;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLFormElement>;
   cssModule?: CSSModule;
 }
diff --git a/types/lib/Input.d.ts b/types/lib/Input.d.ts
index 3538acc81..36e616d18 100644
--- a/types/lib/Input.d.ts
+++ b/types/lib/Input.d.ts
@@ -37,6 +37,7 @@ export interface InputProps
   valid?: boolean;
   invalid?: boolean;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
   plaintext?: boolean;
   addon?: boolean;
diff --git a/types/lib/Modal.d.ts b/types/lib/Modal.d.ts
index 6b785f917..f13dcb047 100644
--- a/types/lib/Modal.d.ts
+++ b/types/lib/Modal.d.ts
@@ -31,6 +31,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLElement> {
   unmountOnClose?: boolean;
   returnFocusAfterClose?: boolean;
   container?: string | HTMLElement | React.RefObject<HTMLElement>;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   trapFocus?: boolean;
 }
diff --git a/types/lib/NavLink.d.ts b/types/lib/NavLink.d.ts
index 0c6cc6e82..970fb5eaa 100644
--- a/types/lib/NavLink.d.ts
+++ b/types/lib/NavLink.d.ts
@@ -5,6 +5,7 @@ export interface NavLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   [key: string]: any;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLAnchorElement>;
   disabled?: boolean;
   active?: boolean;
diff --git a/types/lib/Offcanvas.d.ts b/types/lib/Offcanvas.d.ts
index 6f5fb098b..cc2487ac9 100644
--- a/types/lib/Offcanvas.d.ts
+++ b/types/lib/Offcanvas.d.ts
@@ -14,6 +14,7 @@ export interface OffcanvasProps extends React.HTMLAttributes<HTMLElement> {
   contentClassName?: string;
   cssModule?: CSSModule;
   fade?: boolean;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   isOpen?: boolean;
   keyboard?: boolean;
diff --git a/types/lib/Placeholder.d.ts b/types/lib/Placeholder.d.ts
index a8bfbcb7e..46fc33fdf 100644
--- a/types/lib/Placeholder.d.ts
+++ b/types/lib/Placeholder.d.ts
@@ -10,8 +10,9 @@ export interface PlaceholderProps extends React.HTMLAttributes<HTMLElement> {
   cssModule?: CSSModule;
   size?: string;
   widths?: string[];
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 
 declare class Placeholder extends React.Component<PlaceholderProps> {}
-export default Placeholder;
\ No newline at end of file
+export default Placeholder;
diff --git a/types/lib/Table.d.ts b/types/lib/Table.d.ts
index 5190da1c7..38ffb3b0b 100644
--- a/types/lib/Table.d.ts
+++ b/types/lib/Table.d.ts
@@ -15,6 +15,7 @@ export interface TableProps
   responsive?: boolean | string;
   tag?: React.ElementType;
   responsiveTag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLTableElement>;
 }
 
diff --git a/types/lib/Toast.d.ts b/types/lib/Toast.d.ts
index da5def32a..f7228f108 100644
--- a/types/lib/Toast.d.ts
+++ b/types/lib/Toast.d.ts
@@ -6,6 +6,7 @@ export interface ToastProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   isOpen?: boolean;
   fade?: boolean;
diff --git a/types/lib/ToastBody.d.ts b/types/lib/ToastBody.d.ts
index 6021f2e65..e46a09f26 100644
--- a/types/lib/ToastBody.d.ts
+++ b/types/lib/ToastBody.d.ts
@@ -5,6 +5,7 @@ export interface ToastBodyProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }