A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Overview

Free React landing page template

Open React template preview

Open is a free React landing page template designed for developers/makers who want to create a quick and professional landing page for their open source projects, SaaS products, online services, and more.

Use it for whatever you want, and be sure to reach us out on Twitter if you build anything cool/useful with it.

Created and maintained with ❤️ by Cruip.com.

Live demo

Check the live demo here 👉️ https://open.cruip.com/

Open PRO

Looking for more pages and components? Have a look at the premium version here 👉️ https://cruip.com/demos/open-pro/

The premium template is built on-the-top of Tailwind CSS, and React components have been re-built from scratch.

Table of contents

Usage

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm install

To install the dependencies package.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Google Analytics Setup

This template uses the React Google Analytics Module.

In order to track visitors, you need to set an environment variable called REACT_APP_GA_CODE storing your GA Tracking ID.

Credits

Terms and License

  • Released under the GPL.
  • Copyright 2020 Cruip.
  • Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template.
  • Attribution is not required, although it is really appreciated.

About Us

We're an Italian developer/designer duo creating high-quality design/code resources for developers, makers, and startups.

Stay in the loop

If you would like to know when we release new resources, you can follow us on Twitter, or you can subscribe to our monthly newsletter.

Issues
  • How to have new routes ?

    How to have new routes ?

    Hello and thanks for sharing this layout which will definitely help a few.

    I am reading your source code and tried to add a new route and a link for it in the menu using react-router-dom.

    The route works fine, except when I refresh, the content between the header and the footer is hidden, I have to trigger the route once more to get the content displayed. It work fine on the landing page. Using that layout, is it possible to have other route always display their content, especially when doing F5 ?

    Thanks a lot for sharing!

    opened by kopax 8
  • Cannot read property 'toLowerCase' of undefined

    Cannot read property 'toLowerCase' of undefined

    Dear Cruip Team, When I try to run npm run build, I get this error. I'm still a beginner in React and I would appreciate any help regarding this 🚀

    Error: Cannot read property 'toLowerCase' of undefined CompileError: Begins at CSS selector .invert-color .form-checkbox input:checked, .invert-color .form-radio input:checked

    Screenshot: image

    opened by adithyaakrishna 7
  • Test Suites: 1 failed, 1 total

    Test Suites: 1 failed, 1 total

    $ export REACT_APP_GA_CODE=123
    $ yarn test
    
    FAIL  src/App.test.js
      ● Test suite failed to run
    
        TypeError: Cannot read property 'parentNode' of undefined
    
          12 | 
          13 | // Initialize Google Analytics
        > 14 | ReactGA.initialize(process.env.REACT_APP_GA_CODE);
             |         ^
          15 | 
          16 | const trackPage = page => {
          17 |   ReactGA.set({ page });
    
          at node_modules/react-ga/dist/react-ga.js:926:7
          at _default (node_modules/react-ga/dist/react-ga.js:927:5)
          at Object.initialize (node_modules/react-ga/dist/react-ga.js:267:85)
          at Object.<anonymous> (src/App.js:14:9)
          at Object.<anonymous> (src/App.test.js:3:1)
    
    Test Suites: 1 failed, 1 total
    Tests:       0 total
    Snapshots:   0 total
    Time:        1.084s
    Ran all test suites.
    
    opened by marcolino 5
  • How to change the color of the top right

    How to change the color of the top right "waves"

    Hi! I struggle for hours to find the color var of theese waves on the top right of the landing page. Could you please help me out? Cheers

    opened by tb47 4
  • Add a license

    Add a license

    Could just be me but what's the license on this project? Could it be made explicit?

    The package.json has private set to true but according to the package.json spec that's not a license. "Consider also setting "private": true to prevent accidental publication."

    Edit: Just ran the project and the bottom of the page says "Made by Cruip. All right reserved" so I guess it's not public. It would still be nice if it was clearer.

    Edit 2: FWIW: The name open-react-template is quite misleading given it's not (that) open.

    opened by urbanslug 3
  • Base template

    Base template

    opened by charles01pd2018 3
  • Fails to install dependencies

    Fails to install dependencies

    I made a pastebin of the error npm returns when installing the dependencies https://pastebin.com/eeLDGLAB

    opened by FlexCode29 3
  • Provide a simple basic guide how to deploy to major cloud hosting sites

    Provide a simple basic guide how to deploy to major cloud hosting sites

    A simple basic guide how to deploy to major cloud hosting sites (say: AWS/Heroku/Github pages/Gitlab pages) should be welcome.

    I ask because I did try to deploy to gitlab pages following basic indications compiling a .gitlab-ci.yml file and faced a lot of hurdles and errors.

    opened by marcolino 2
  • Outdate node-sass will throw an error during is npm install

    Outdate node-sass will throw an error during is npm install

    Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-88_binding.node
    Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-88_binding.node":
    
    HTTP error 404 Not Found
    
    Hint: If github.com is not accessible in your location
          try setting a proxy via HTTP_PROXY, e.g.
    
          export HTTP_PROXY=http://example.com:1234
    
    opened by the-black-viper 2
  • After reloading the page, the page scrolls down a little

    After reloading the page, the page scrolls down a little

    Thank you for the free theme. Loving it. Leaning towards buying the premium soon.

    After you refresh the page, the y scrollbar scrolls a little. Can't seem to find the offset setting within the code.

    Thanks.

    opened by shubhankar30 2
  • Add node version hint

    Add node version hint

    To prevent unnecessary debugging I added a hint to switch your node version to 8 - 13

    opened by vallezw 0
Releases(1.0.0)
Owner
Cruip
Landing page templates for your next big project.
Cruip
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 18k Oct 11, 2021
A React-based UI toolkit for the web

Blueprint Blueprint is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications

Palantir Technologies 18.2k Oct 17, 2021
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 438 Oct 12, 2021
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Kiwi.com 1.1k Oct 15, 2021
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor

React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Microsoft 58 Oct 13, 2021
Simple and elegant component-based UI library

Simple and elegant component-based UI library Custom components • Concise syntax • Simple API • Tiny Size Riot brings custom components to all modern

Riot.js 14.6k Oct 17, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 72.2k Oct 12, 2021
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)

Mobiscroll What is Mobiscroll? Mobiscroll is a UI library for progressive webapps and hybrid development. Created with a lot of attention to usability

Mobiscroll 1.5k Oct 15, 2021
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.1k Oct 15, 2021
Storybook is a development environment for UI components.

?? The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Storybook 65.3k Oct 18, 2021
The official Semantic-UI-React integration

Semantic UI React Installation & Usage See the Documentation for an introduction, usage information, and examples. Built With Amazon Publishing — the

Semantic Org 12.5k Oct 16, 2021
React components for google places API.

The package provides 3 tools for working with google places services: ReactGoogleAutocomplete is a simple html input component that provides functiona

Ven Korolev 210 Oct 19, 2021
📒 Showcase multiple React components within a story

React Storybook Chapters Addon React Storybook Chapters addon allows showcasing of multiple components within a story by breaking it down into smaller

Checkfront Inc 150 Jul 24, 2021
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 11.2k Oct 16, 2021
📕React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

?? React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

Ankit Kumar Pandit 413 Oct 16, 2021
A collection of JetBrains Web UI components

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

JetBrains 2.7k Sep 16, 2021
A collection of JetBrains Web UI components

Ring UI — JetBrains Web UI components This collection of UI components aims to provide all of the necessary building blocks for web-based products bui

JetBrains 2.8k Oct 19, 2021
⚛️A high quality UI Toolkit, A Component Library for React 16+.

uiw The official documentation site for uiw. A high quality UI Toolkit, A Component Library for React 16+. ?? Installation npm install uiw --save You

uiw 586 Oct 16, 2021
Elastic UI Framework 🙌

Elastic UI Framework The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React?

elastic 3.1k Oct 12, 2021