React Landing Page

React UI component library for building Landing Pages.

npm i react-landing-page@next

# for best dev experience install and use rebass
npm i rebass@next

>> SEE DEMO <<

React Landing Page is a set of highly-composable React components for building advanced landing pages. It is built using Rebass, a library of UI primitives. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

Getting Started

import React from 'react'
import { Provider, Heading, Subhead } from 'rebass'
import {
  Hero, CallToAction, ScrollDownIndicator
} from 'react-landing-page'

const App = props => (
  <Provider>
    <Hero
      color="black"
      bg="white"
      backgroundImage="https://source.unsplash.com/jxaj-UrzQbc/1600x900"
    >
        <Heading>Name of your app</Heading>
        <Subhead>a couple more words</Subhead>
        <CallToAction href="/getting-started" mt={3}>Get Started</CallToAction>
        <ScrollDownIndicator/>
    </Hero>
  </Provider>
)

To use Rebass with emotion, import from rebass/emotion:

import * as Rebass from 'rebass/emotion'

Features

1. 👋 Hero
2. 🔥 Features
3. ✅ Checklist
4. 💼 Company Logos
5. 🙎‍ Testimony
6. 💳 Pricing
7. 📣 Call To Action
8. 📩 Sign Up
9. 👩‍💼 Team

Documentation

• Getting Started
• Theming
• Components
• Server-Side Rendering

CodeSandbox

Try it out:

https://codesandbox.io/s/github/hermanya/react-landing-page/tree/master/examples/sandbox

Related

• rebass
• styled-system
• grid-styled
• styled-components
• emotion

Contributing | MIT License