react-landing-page

React UI component library for building Landing Pages.

Usage no npm install needed!

<script type="module">
  import reactLandingPage from 'https://cdn.skypack.dev/react-landing-page';
</script>

README

Demo

React Landing Page

React UI component library for building Landing Pages.

Build Status Coverage Downloads Version

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

CodeSandbox

Try it out:

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

Related

Contributing | MIT License