Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
April 4, 2023 18:04
April 4, 2023 12:21
April 4, 2023 12:21
March 16, 2023 13:54
May 29, 2023 16:38
April 5, 2017 06:14
April 4, 2023 12:21
May 25, 2023 11:21
April 4, 2023 12:21

The styled-components website. Built with Next.js, Preact and (of course) styled-components!


Thank you so much for wanting to contribute to the website! We could really use a hand at making it the best it can be, see the issues for some ideas on what to do.

If you've never worked with the technologies used in this repo, here are some links that may help:

Running locally

To develop the website locally, you'll want to run the development server:

# Download the repo
git clone
# Enter the repo
cd styled-components-website
# Install the dependencies
yarn install
# Start local development
yarn dev

Note: This requires Node.js and yarn to be set up locally, see for more information.

Updating the visual diffs

If you add a new section or materially change the website, it probably will trigger the image comparison diff snapshot to fail. These can be updated via:

yarn test -u

Folder structure

This is what each folder correlates to:

├── components/  # Shared components
├── pages/       # The actual pages, mostly containing layout; the directory directly correlates to the URL. (e.g. pages/docs/basics.js ===
├── sections/    # The content, written in Markdown
├── public/      # Assets
├── test/        # Tests
├── utils/       # Various utilities use across the site
└── vendor/      # Cached dependencies