Install the package

npm install @mylighthouse/prism-foundation

pnpm add @mylighthouse/prism-foundation

yarn add @mylighthouse/prism-foundation

Import the base stylesheet

Import it once, at your app's CSS entry point — or styles/tailwind.css instead if your app uses Tailwind:

@import "@mylighthouse/prism-foundation/styles/prism-foundation.css";

Import tokens, icons and illustrations

These are available from the main entry point:

import { PRISM_SPACING_50 } from '@mylighthouse/prism-foundation';

The package also follows the exports specification, so each part resolves without a dist/ prefix:

• @mylighthouse/prism-foundation/styles/* — base styles
• @mylighthouse/prism-foundation/icons/* — icons
• @mylighthouse/prism-foundation/illustrations/* — illustrations
• @mylighthouse/prism-foundation/fonts/* — fonts
• @mylighthouse/prism-foundation/tokens/* — raw design tokens

Install the package

npm install @mylighthouse/prism-react

pnpm add @mylighthouse/prism-react

yarn add @mylighthouse/prism-react

Import the component styles

They go after the foundation styles:

@import "@mylighthouse/prism-foundation/styles/prism-foundation.css";
@import "@mylighthouse/prism-react/styles.css";

Render a component

import { Button } from '@mylighthouse/prism-react';

export default function Example() {
  return <Button>Save changes</Button>;
}