diff --git a/README.md b/README.md
index 701b012360..b6318af80b 100644
--- a/README.md
+++ b/README.md
@@ -374,16 +374,18 @@ Possible values for tabsRole are:
 - Tab
 - TabPanel
 - TabList
+- Tabs
 
 #### Pass through properties
 
 Note: Because of how react-tabs works internally (it uses cloning to opaquely control various parts of the tab state), you need to pass any incoming props to the component you're wrapping. The easiest way to do this is to use the rest and spread operators, e.g. see `{...otherProps}` below.
 
-```javascript
+```tsx
 import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
+import type { ReactTabsFunctionComponent, TabProps } from 'react-tabs';
 
 // All custom elements should pass through other props
-const CustomTab = ({ children, ...otherProps }) => (
+const CustomTab = ({ children, ...otherProps }): ReactTabsFunctionComponent<TabProps> => (
   <Tab {...otherProps}>
     <h1>{children}</h1>
   </Tab>
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000000..4ffb9ff1f1
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,53 @@
+import { FunctionComponent, HTMLProps } from 'react';
+
+export interface TabsProps
+  extends Omit<HTMLProps<HTMLDivElement>, 'className' | 'onSelect' | 'ref'> {
+  className?: string | string[] | { [name: string]: boolean } | undefined;
+  defaultFocus?: boolean | undefined;
+  defaultIndex?: number | undefined;
+  direction?: 'rtl' | 'ltr' | undefined;
+  disabledTabClassName?: string | undefined;
+  disableUpDownKeys?: boolean | undefined;
+  domRef?: ((node?: HTMLElement) => void) | undefined;
+  environment?: Window | undefined;
+  focusTabOnClick?: boolean | undefined;
+  forceRenderTabPanel?: boolean | undefined;
+  onSelect?:
+    | ((index: number, last: number, event: Event) => boolean | void)
+    | undefined;
+  selectedIndex?: number | undefined;
+  selectedTabClassName?: string | undefined;
+  selectedTabPanelClassName?: string | undefined;
+}
+
+export interface TabListProps
+  extends Omit<HTMLProps<HTMLUListElement>, 'className'> {
+  className?: string | string[] | { [name: string]: boolean } | undefined;
+}
+
+export interface TabProps
+  extends Omit<HTMLProps<HTMLLIElement>, 'className' | 'tabIndex'> {
+  className?: string | string[] | { [name: string]: boolean } | undefined;
+  disabled?: boolean | undefined;
+  disabledClassName?: string | undefined;
+  selectedClassName?: string | undefined;
+  tabIndex?: string | undefined;
+}
+
+export interface TabPanelProps
+  extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
+  className?: string | string[] | { [name: string]: boolean } | undefined;
+  forceRender?: boolean | undefined;
+  selectedClassName?: string | undefined;
+}
+
+export interface ReactTabsFunctionComponent<P = {}> extends FunctionComponent<P> {
+  tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel';
+}
+
+export const Tabs: FunctionComponent<TabsProps>;
+export const TabList: FunctionComponent<TabListProps>;
+export const Tab: FunctionComponent<TabProps>;
+export const TabPanel: FunctionComponent<TabPanelProps>;
+
+export declare function resetIdCounter(): void;
diff --git a/package.json b/package.json
index 20a4d2f72a..5eac8d69fc 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "An accessible and easy tab component for ReactJS",
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "typings": "index.d.ts",
   "scripts": {
     "clean:commonjs": "rimraf lib",
     "clean:umd": "rimraf dist",
@@ -36,7 +37,8 @@
     "esm",
     "lib",
     "style",
-    "src"
+    "src",
+    "index.d.ts"
   ],
   "homepage": "https://github.com/reactjs/react-tabs",
   "keywords": [
diff --git a/src/components/Tab.js b/src/components/Tab.js
index 5f8ad0c442..4ca23755b6 100644
--- a/src/components/Tab.js
+++ b/src/components/Tab.js
@@ -25,14 +25,14 @@ const propTypes = {
     PropTypes.object,
   ]),
   disabled: PropTypes.bool,
-  tabIndex: PropTypes.string,
   disabledClassName: PropTypes.string,
   focus: PropTypes.bool, // private
   id: PropTypes.string, // private
   panelId: PropTypes.string, // private
   selected: PropTypes.bool, // private
   selectedClassName: PropTypes.string,
-  tabRef: PropTypes.func,
+  tabIndex: PropTypes.string,
+  tabRef: PropTypes.func, // private
 };
 
 const Tab = (props) => {
diff --git a/src/components/Tabs.js b/src/components/Tabs.js
index 9978e52d69..3fcb038def 100644
--- a/src/components/Tabs.js
+++ b/src/components/Tabs.js
@@ -12,7 +12,6 @@ const MODE_CONTROLLED = 0;
 const MODE_UNCONTROLLED = 1;
 const propTypes = {
   children: childrenPropType,
-  direction: PropTypes.oneOf(['rtl', 'ltr']),
   className: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.array,
@@ -20,16 +19,17 @@ const propTypes = {
   ]),
   defaultFocus: PropTypes.bool,
   defaultIndex: PropTypes.number,
+  direction: PropTypes.oneOf(['rtl', 'ltr']),
   disabledTabClassName: PropTypes.string,
   disableUpDownKeys: PropTypes.bool,
   domRef: PropTypes.func,
+  environment: PropTypes.object,
   focusTabOnClick: PropTypes.bool,
   forceRenderTabPanel: PropTypes.bool,
   onSelect: onSelectPropType,
   selectedIndex: selectedIndexPropType,
   selectedTabClassName: PropTypes.string,
   selectedTabPanelClassName: PropTypes.string,
-  environment: PropTypes.object,
 };
 const defaultProps = {
   defaultFocus: false,