From bf37aea6273927dc0c295d9a97edc1a9e9350b11 Mon Sep 17 00:00:00 2001 From: Carl Whittaker Date: Wed, 6 Mar 2024 10:17:09 +0000 Subject: [PATCH] chore: add some install notes around themes, global styles and fonts --- README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/README.md b/README.md index 9b770231..ad4d432b 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,37 @@ This library is suitable for use in an app using React 18 and Next.js 13+ You can install it using `npm i @oaknational/oak-components` or any other package manager that supports the NPM registry. +### Theming, global styles and fonts + +For components to be styled correctly they will need access to a theme, some global styles and the Lexend font. + +You can add those to your app using something like: + +```typescript +import { OakThemeProvider, oakDefaultTheme } from "@oaknational/oak-components"; +import Head from "next/head"; +import { Lexend } from "next/font/google"; + +const lexend = Lexend({ subsets: ['latin'] }); + +export default function RootLayout({ children }) { + return ( + + + + + + {children} + + + ); +} +``` + +### TypeScript + +If you're using TypeScript you might want to add `@types/styled-components` to your development dependencies (`npm i -D @types/styled-components`). This will ensure that all components are properly type hinted in your IDE. + ## Development 1. Copy the example env config `cp .env.example .env`