Lens Design System – Core React Component Library

Documentation

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

What is included?

$3

- ./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

$3

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

$3

- ./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:

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

export const Component = () => (

);
`

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:

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

export const Component = () => (



);
``

Usage on web

TBD