Use Styled Starter to get a React project up and running quickly with Server-Side Rendering (thanks to Next.js) and a built-in design system (thanks to Styled Components with Styled System).

Getting Started First, download the basic starter kit, then install from within the project directory. npm install Get a dev environment up and running. npm run dev Open up localhost:3000 on your browser and you should see a page that looks like this.

Pages and Routing By default, the starter project has two pages: an index page and an about page. To add a new page, go to src/pages and duplicate About.js then change its name and edit it. // src/pages/NewPage.js import { Div } from 'styled-system-html' ; import SiteFooter from '../components/SiteFooter' export default ( props ) => ( < Div > < Div p = { 6 } maxWidth = "1200px" mx = "auto" textAlign = "center" > { /* Page content will go here */ } < / Div > < SiteFooter / > < / Div > ) Next, go to the top level pages directory and create a new page. // pages/newpage.js import NewPage from '../src/pages/NewPage' import Page from '../src/containers/Page' export default ( ) => ( < Page name = "NewPage" > < NewPage / > < / Page > ) That’s it! Well, unless your project is a Github project page. For that, you will need to set up next.config.js (see this branch for more info).

Theming To adjust colors, layout and typography, edit the theme file in the /src directory. Generate theme data by setting custom fonts or colors in the Theme section. You can also choose from a selection of sample themes by clicking choose theme at the top of this page.

State Management This demo uses Refunk for state management. It is a simpler, smaller alternative to other state management libraries that makes use of React’s built-in component state. See Styled Starter with Refunk.