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 2021

Created by

@ruucm