React-landing-ui NPM

react-landing-ui

Demo

https://architgarg.github.io/react-landing-ui/

Install

npm install --save react-landing-ui

Usage

import React, { Component } from 'react'

import { Logo } from "./components/Logo";
import { Button, NavBar, Footer, Switch } from 'react-landing-ui';

class Home extends Component {
  render() {
    return <>
      <NavBar logo={<Logo/>}>
        <a href="#">About</a>
        <a href="#">Pricing</a>
        <a href="#">Roadmap</a>
        <a href="#">Contact</a>
        <ShiningDiv>
          <Button>Start Project</Button>
        </ShiningDiv>
      </NavBar>
      <div>
        <Switch label="Sample Switch"/>
      </div>
      <Footer
        logo={<Logo/>}
        mainLinks={<>
          <a href="#">About</a>
          <a href="#">Pricing</a>
          <a href="#">Roadmap</a>
          <a href="#">Contact</a>
        </>}
        extraLinks={<>
          <a href="#">Privacy</a>
          <a href="#"> &copy; Archit 2022</a>
        </>}
      />
    </>
  }
}

:root {
  --rlu-primary: #005070;
  --rlu-white: #ffffff;
  --rlu-footer-bg: #1A1834;

  --rlu-font-primary: 'Inter', sans-serif;
  --rlu-font-secondary: 'Poppins', sans-serif;

  --rlu-width-nav: 1080px;
  --rlu-width-container: 890px;
  --rlu-space-vertical: 10rem;
  --rlu-nav-item-hover: #5547f0;

  --rlu-btn-bg-color: #005070;
  --rlu-btn-color: white;
  --rlu-btn-font: 'Poppins', sans-serif
}