Getting Started

Start Code

Lighthouse initially starts as a React UI Library.

You can use the pure power of the system as an npm package.

Installing Lighthouse

Install Lighthouse package with peer dependencies.

yarn add @harborschool/lighthouse styletron-engine-atomic styletron-react framer-motion

if you use TypeScript add external TypeScript declarations:

yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic

Adding Lighthouse to Your Application

In order to use Lighthouse, you need to do a small setup and wrap the root of your application with StyletronProvider and LighthouseProvider components:

import React from "react"
import ReactDOM from "react-dom"
import { Client as Styletron } from "styletron-engine-atomic"
import { Provider as StyletronProvider } from "styletron-react"
import { LightTheme, LighthouseProvider } from "@harborschool/lighthouse"
import * as System from "@harborschool/lighthouse"
const engine = new Styletron()
function App() {
  return (
    <StyletronProvider value={engine}>
      <LighthouseProvider theme={LightTheme}>
        <System.Button>Hello Lighthouse</System.Button>
      </LighthouseProvider>
    </StyletronProvider>
  )
}
const rootElement = document.getElementById("root")
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
)

Examples

There are starter examples for the following frameworks.

With Create React App

With Gatsby

With Next.js

© Lighthouse Design System 2022

Created by