Foundation

@mylighthouse/prism-foundation is the base layer of the design system: design tokens, base styles, icons, illustrations and fonts.

Requirements

• Node 22 or 24+

npm install @mylighthouse/prism-foundation

pnpm add @mylighthouse/prism-foundation

yarn add @mylighthouse/prism-foundation

Import the base stylesheet 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";

The package 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

Tokens, icons and illustrations are also importable from the main entry point:

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

React components

@mylighthouse/prism-react provides the React component library.

Requirements

• React 19
• Node 22 or 24+

npm install @mylighthouse/prism-react

pnpm add @mylighthouse/prism-react

yarn add @mylighthouse/prism-react

Import the component styles after the foundation styles:

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

Then render a component:

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

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