Lens Design System – Core React Component Library

Documentation

Browse the documentation at lens-design-system.k8slens.dev.

What is included?

ES Modules

• ./lib/es/index.js - Main ES module
• ./lib/es/index.electron.js - Main ES module for Electron
• ./lib/es/ComponentName/ComponentName.js - Individual ES modules

CommonJS modules

• ./lib/cjs/index.js - Main CommonJS module
• ./lib/cjs/ComponentName/ComponentName.js - Individual CommonJS modules

AMD package

• ./lib/web/[version-number]/index.css - Static CSS for web
• ./lib/web/[version-number]/index.js - AMD package for RequireJS. Requires external react import.

Usage with React apps

• run npm i -s @k8slens/lds @k8slens/lds-tokens
• import @k8slens/lds-tokens/lib/web/font-imports.css in your React app to include fonts
• import @k8slens/lds/index.css in your React app to include general styles
• import @k8slens/lds/typography.css in your React app (after index.css) to include base typographic styles
• Use in a component:

import { Button } from "@k8slens/lds";

export const Component = () => (
  <Button label="My Button" />
);

Usage with Electron React apps

• run npm i -s @k8slens/lds @k8slens/lds-tokens
• import @k8slens/lds-tokens/lib/electron/fonts.css in your React Electron app to include fonts
• import @k8slens/lds/index.css in your React Electron app to include general styles
• Use in a component:

import { Button } from "@k8slens/lds";

export const Component = () => (
  <Button label="My Button" />
);

Usage on web

TBD