diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 8656dea03..e4bb0fe1c 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -5,7 +5,7 @@ Have a usage question?
======================
The issue tracker isn't the best place for usage questions. This format is not well-suited for Q&A, and questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:
-- Read the docs: https://github.com/styled-components/styled-components/blob/master/docs
+- Read the docs: https://www.styled-components.com/docs
- Look for/ask questions on stack overflow: https://stackoverflow.com/questions/ask?tags=styled-components
- Ask in chat: https://gitter.im/styled-components/styled-components
diff --git a/README.md b/README.md
index ad868b46c..185d669e1 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-
+
@@ -19,413 +19,27 @@ npm install --save styled-components
-Utilising [tagged template literals](./docs/tagged-template-literals.md) (a recent addition to JavaScript) and the [power of CSS](./docs/css-we-support.md), `styled-components` allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
+Utilising [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
-`styled-components` is compatible with both React (for web) and ReactNative – meaning it's the perfect choice even for truly universal apps! See the [ReactNative section](#react-native) for more information
+`styled-components` is compatible with both React (for web) and ReactNative – meaning it's the perfect choice even for truly universal apps! See the [documentation about ReactNative](https://www.styled-components.com/docs/basics#react-native) for more information.
> **Note:** If you're not using `npm` as your package manager, aren't using a module bundler or aren't sure about either of those jump to [Alternative Installation Methods](#alternative-installation-methods).
-*Made by [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr), supported by [Front End Center](https://frontend.center) and [Thinkmill](http://thinkmill.com.au/). Thank you for making this project possible!*
-
-## Usage
-
-### Basic
-
-This creates two react components, `` and `<Wrapper>`:
-
-```JSX
-import React from 'react';
-
-import styled from 'styled-components';
-
-// Create a <Title> react component that renders an <h1> which is
-// centered, palevioletred and sized at 1.5em
-const Title = styled.h1`
- font-size: 1.5em;
- text-align: center;
- color: palevioletred;
-`;
-
-// Create a <Wrapper> react component that renders a <section> with
-// some padding and a papayawhip background
-const Wrapper = styled.section`
- padding: 4em;
- background: papayawhip;
-`;
-```
-
-*(The CSS rules are automatically vendor prefixed, so you don't have to think about it!)*
-
-You render them like so:
-
-```JSX
-// Use them like any other React component – except they're styled!
-<Wrapper>
- <Title>Hello World, this is my first styled component!
-
-```
-
-
-
-### Passed props
-
-Styled components pass on all their props. This is a styled ``:
-
-```JS
-import React from 'react';
-import styled from 'styled-components';
-
-// Create an component that'll render an tag with some styles
-const Input = styled.input`
- font-size: 1.25em;
- padding: 0.5em;
- margin: 0.5em;
- color: palevioletred;
- background: papayawhip;
- border: none;
- border-radius: 3px;
-
- &:hover {
- box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
- }
-`;
-```
-
-You can just pass a `placeholder` prop into the `styled-component`. It will pass it on to the DOM node like any other react component:
-
-```JSX
-// Render a styled input with a placeholder of "@mxstbr"
-
-```
-
-Here is one input without any content showing the placeholder, and one with some content:
-
-
-
-### Adapting based on props
-
-This is a button component that has a `primary` state. By setting `primary` to `true` when rendering it we adjust the background and text color. *(see [tips and tricks](./docs/tips-and-tricks.md#component-adjustments) for more examples of this pattern!)*
-
-```JSX
-import styled from 'styled-components';
-
-const Button = styled.button`
- /* Adapt the colors based on primary prop */
- background: ${props => props.primary ? 'palevioletred' : 'white'};
- color: ${props => props.primary ? 'white' : 'palevioletred'};
-
- font-size: 1em;
- margin: 1em;
- padding: 0.25em 1em;
- border: 2px solid palevioletred;
- border-radius: 3px;
-`;
-
-export default Button;
-```
-
-```JSX
-
-
-```
-
-
-
-#### Styling Components instead of Elements
-
-`styled` also works perfectly for styling your own or third-party components, like a `react-router` ``!
-
-```JS
-import styled from 'styled-components';
-import { Link } from 'react-router';
-
-const StyledLink = styled(Link)`
- color: palevioletred;
- display: block;
- margin: 0.5em 0;
- font-family: Helvetica, Arial, sans-serif;
-
- &:hover {
- text-decoration: underline;
- }
-`;
-```
-
-```JSX
-Standard, unstyled Link
-This Link is styled!
-```
-
-
-
-> **Note:** `styled-components` generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the `className` prop. For the styles to be applied, third-party components must attach the passed-in `className` prop to a DOM node. See [Using `styled-components` with existing CSS](./docs/existing-css.md) for more information!
->
-> You can also pass tag names into the `styled()` call, like so: `styled('div')`. In fact, the styled.tagname helpers are just aliases of `styled('tagname')`!
-
-### Extending styles
-
-Taking the `Button` component from above and removing the primary rules, this is what we're left with – just a normal button:
-
-```JSX
-import styled from 'styled-components';
-
-const Button = styled.button`
- background: white;
- color: palevioletred;
- font-size: 1em;
- margin: 1em;
- padding: 0.25em 1em;
- border: 2px solid palevioletred;
- border-radius: 3px;
-`;
-
-export default Button;
-```
-
-Let's say someplace else you want to use your button component, but just in this one case you want the color and border color to be `tomato` instead of `palevioletred`. Now you _could_ pass in an interpolated function and change them based on some props, but that's quite a lot of effort for overriding the styles once.
-
-To do this in an easier way you can call `extend` on the component to generate another. You style it like any other styled-component. It overrides duplicate styles from the initial component and keeps the others around:
-
-```JSX
-// TomatoButton.js
-
-import React from 'react';
-import styled from 'styled-components';
-
-import Button from './Button';
-
-const TomatoButton = Button.extend`
- color: tomato;
- border-color: tomato;
-`;
-
-export default TomatoButton;
-```
-
-This is what our `TomatoButton` looks like, even though we have only specified the `color` and the `border-color`. Instead of copy and pasting or factoring out the styles into a separate function we've now reused them.
-
-
-
-
-
-### Animations
-
-CSS animations with `@keyframes` aren't scoped to a single component but you still don't want them to be global. This is why we export a `keyframes` helper which will generate a unique name for your keyframes. You can then use that unique name throughout your app.
-
-This way, you get all the benefits of using JavaScript, are avoiding name clashes and get your keyframes like always:
-
-```JS
-import styled, { keyframes } from 'styled-components';
-
-// keyframes returns a unique name based on a hash of the contents of the keyframes
-const rotate360 = keyframes`
- from {
- transform: rotate(0deg);
- }
-
- to {
- transform: rotate(360deg);
- }
-`;
-
-// Here we create a component that will rotate everything we pass in over two seconds
-const Rotate = styled.div`
- display: inline-block;
- animation: ${rotate360} 2s linear infinite;
-`;
-```
-
-This will now rotate it's children over and over again, for example our logo:
-
-```JSX
-< 💅 >
-```
-
-
-
-### React Native
-
-`styled-components` has a ReactNative mode that works _exactly_ the same, except you import the things from `styled-components/native`:
-
-```JSX
-import styled from 'styled-components/native';
-
-const StyledView = styled.View`
- background-color: papayawhip;
-`;
-
-const StyledText = styled.Text`
- color: palevioletred;
-`;
-
-class MyReactNativeComponent extends React.Component {
- render() {
- return (
-
- Hello World!
-
- )
- }
-}
-```
-
-We also support more complex styles (like `transform`), which would normally be an array, and shorthands (e.g. for `margin`) thanks to [`css-to-react-native`](https://github.com/styled-components/css-to-react-native)! Imagine how you'd write the property in ReactNative, guess how you'd transfer it to CSS and you're probably right:
-
-```JS
-const RotatedBox = styled.View`
- transform: rotate(90deg);
- text-shadow-offset: 10px 5px;
- font-variant: small-caps;
- margin: 5px 7px 2px;
-`
-```
-
-> You cannot use the `keyframes` and `injectGlobal` helpers since ReactNative doesn't support keyframes or global styles. We will also log a warning if you use media queries or nesting in your CSS.
-
-### Theming
-
-`styled-components` has full theming support by exporting a wrapper `` component. This component provides a theme to all react components underneath itself in the render tree, even multiple levels deep.
-
-To illustrate this, let's create a component that renders its children with a theme. We do so by wrapping all its children in a `ThemeProvider` that has a `theme`:
-
-```JSX
-import { ThemeProvider } from 'styled-components';
-
-const theme = {
- main: 'mediumseagreen',
-};
-
-// Create a GreenSection component that renders its children wrapped in
-// a ThemeProvider with a green theme
-const GreenSection = (props) => {
- return (
-
- {props.children}
-
- );
-}
-```
-
-Second, let's create a styled component that adapts to the theme.
-
-`styled-components` injects the current theme via `props.theme` into the components, which means you can adapt your component to the theme with interpolated functions.
-
-We'll create a `button` that adapts based on the `main` property of the theme:
-
-```JS
-// Button.js
-import styled from 'styled-components';
-
-const Button = styled.button`
- /* Color the background and border with theme.main */
- background: ${props => props.theme.main};
- border: 2px solid ${props => props.theme.main};
-
- /* …more styles here… */
-`;
-```
-
-Now, when we render the `Button` inside a `GreenSection`, it'll be green!
-
-```JSX
-
-
- {/* Notice how there's no code changes for the button, it just
- adapts to the theme passed from GreenSection! */}
-
-
-
- {/* This works unlimited levels deep within the component
- tree since we use React's context to pass the theme down. */}
-
-
- {/* All children of this component will be green */}
-
-
-
- {/* All children of this component will be red */}
-
-
-
-
-
-
- );
-}
-```
-
-Please make sure you sanitize user input if you accept custom themes from users! See the [security doc](./security.md) for more information.
-
-## Function themes
-
-You can also pass a `theme` that is a function from `outerTheme => newValues`. This can be useful to make themes that are themselves contextual.
-
-```js
-/* A theme that swaps the 'fg' and 'bg' colours for all its children. */
-
-const InvertColors = ({children}) => (
- ({ fg: outerTheme.bg, bg: outerTheme.fg })}>
- { children }
-
-)
-```
-
-## Getting the theme outside styled components
-
-If you ever need to get the current `theme` outside styled components (e.g. inside big components), you can use the `withTheme` Higher Order Component:
-
-```JS
-import { withTheme } from 'styled-components'
-
-class MyComponent extends React.Component {
- render() {
- const { theme } = this.props
-
- console.log('Current theme: ', theme);
- // ...
- }
-}
-
-export default withTheme(MyComponent)
-```
+**The documentation has been moved to [styled-components.com](https://www.styled-components.com/docs/advanced#theming), please update your bookmarks!**
diff --git a/docs/typescript-support.md b/docs/typescript-support.md
index fae8c578a..524d382d5 100644
--- a/docs/typescript-support.md
+++ b/docs/typescript-support.md
@@ -1,135 +1 @@
-# Typescript Support
-
-`styled-components` has typescript definitions to allow the library to be
-used in any Typescript project.
-
-To use the library you can import it as you normally do with any TS dependency.
-
-```
-import styled from 'styled-components'
-```
-
-## Example
-
-A very basic example can be found [here](https://github.com/patrick91/Styled-Components-Typescript-Example).
-
-## Define a Theme Interface
-
-By default every styled component will have the theme prop set to `any`.
-When building complex apps it would be better to have autocomplete and
-error checks everywhere.
-
-To have autocomplete and checks around the theme prop we should first define
-the theme interface we would like to use throught our app:
-
-```ts
-// theme.ts
-export default interface ThemeInterface {
- primaryColor: string;
- primaryColorInverted: string;
-}
-```
-
-then we can re-export the styled function with our custom theme interface:
-
-```ts
-// my-styled-components.ts
-import * as styledComponents from "styled-components";
-import { ThemedStyledComponentsModule } from "styled-components";
-
-import ThemeInterface from "./theme";
-
-const {
- default: styled,
- css,
- injectGlobal,
- keyframes,
- ThemeProvider
-} = styledComponents as ThemedStyledComponentsModule;
-
-export default styled;
-export { css, injectGlobal, keyframes, ThemeProvider };
-```
-
-Finally, instead of importing the styled functions from the `styled-components` module,
-we import it from our custom module.
-
-```ts
-import * as React from "react";
-
-// same for css, etc
-import styled from "themed-components";
-
-
-const Link = styled.a`
- font-family: 'Cabin';
- font-weight: bold;
- font-size: 1.2rem;
- letter-spacing: 0.05em;
- color: {props => props.theme.primaryColor};
- display: block;
- cursor: pointer;
-
- transition: 0.3s background ease-out;
-
- &:hover {
- background: rgba(255, 255, 255, 0.2);
- }
-`;
-
-
-export default Link;
-```
-
-## Caveats
-
-### Class Name
-
-When defining a component you'd need to have `className` marked as optional
-in the propTypes interface:
-
-```ts
-interface LogoProps {
- className?: string;
-}
-
-
-class Logo extends React.Component {
- render() {
- return
- Logo
-
;
- }
-}
-
-const LogoStyled = styled(Logo)`
- font-family: 'Helvetica';
- font-weight: bold;
- font-size: 1.8rem;
-`;
-```
-
-This is because typescript won't understand that `LogoStyled` has already a `className` set.
-
-### Stateless Component
-
-
-To use stateless components and have typechecking for the props you'd need to
-define the component alongside with its type, like this:
-
-```ts
-interface BoxProps {
- theme?: ThemeInterface;
- borders?: boolean;
- className?: string;
-}
-
-
-const Box:React.StatelessComponent = (props) =>
-
{props.children}
;
-
-
-const StyledBox = styled(Box)`
- padding: ${props => props.theme.lateralPadding};
-`;
-```
+**The documentation has been moved to [styled-components.com](https://www.styled-components.com/docs/api#typescript), please update your bookmarks!**
- 
- 
- 
- 
- 
- 
-