@k8slens/lds

Core React component library for the Lens Design System.

Installation

npm install @k8slens/lds @k8slens/lds-tokens

Setup

Import required styles in your app entry point:

// Fonts (required)
import "@k8slens/lds-tokens/lib/electron/font-face.css";

// Tokens (required)
import "@k8slens/lds-tokens/lib/web/tokens.core.css";
import "@k8slens/lds-tokens/lib/web/tokens.dark.css"; // or tokens.light.css

// Component styles (required)
import "@k8slens/lds/lib/es/index.css";

// Optional: Base typography styles
import "@k8slens/lds/lib/es/typography.css";

Usage

import { Button, Input, Modal, Select } from "@k8slens/lds";

export const MyComponent = () => <Button label="Click me" type="primary" />;

Documentation

Browse components and examples at lens-design-system.k8slens.dev.

AI Assistance

This package includes an llms.txt file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., CLAUDE.md):

Read node_modules/@k8slens/lds/llms.txt for component API reference.
Read node_modules/@k8slens/lds-tokens/llms.txt for design tokens reference.

Always use LDS components and tokens instead of custom implementations:
- Use Button, Input, Modal, Select etc. from @k8slens/lds
- Use CSS variables from @k8slens/lds-tokens for colors, spacing, radius
- Never hardcode values that exist as tokens
Search llms.txt files before creating custom components or styles.